기로그 기로그

리액트 라우터 URL을 입력하면 URL에 맞는 페이지를 보여주는것을 라우팅이라고한다. 리액트 라우터는 SPA에서 페이지 이동 기능을 수행하기 위해 사용되는 대표적인 라이브러리다. 설치 yarn add react-router-dom npm i react-router-dom //types yarn add -dev @types/react-router-dom npm i -dev @types/react-router-dom 라우터 구성하기 구성하는 방식은 BrowserRouter방식(6.4v이전)과 createBrowserRouter방식(6.4v이후) 으로 나뉜다. BrowserRouter function App(){ return( ) } createBrowserRouter function App() { const..

리액트의 대표적인 특징인 가상 DOM을 사용하는데 있어서브라우저가 렌더링되는 과정을 이해하는게 중요하다. 브라우저 렌더링 과정을 통해서 가상 DOM이 어떻게 생겨났는지 알아본다. 브라우저 렌더링과 DOM 1.사용자가 어떤 웹 페이지를 방문한다. 브라우저는 사용자가 요청한 주소의 HTML 파일을 다운로드한다. 2.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 DOM트리를 만든다. 3.DOM을 생성하다 CSS 파일을 만나면 해당 CSS파일도 다운로드하여 CSS도 파싱하고 트리를 생성한다(CSSOM) 4.브라우저는 DOM노드를 2번에서 생성된 DOM트리를 순회하며 사용자 눈에 보이는 노드만 방문한다. (* 분석과정을 조금이라도 줄이기 위해서 display:none과 같은 화면에 보이지 않는 ..

리액트의 상태관리 리액트는 단방향 데이터흐름을 갖는다.부모에서 자식으로만 데이터를 props로 전달할 수 있고 자식이 갖는 데이터는 부모에게 전달할 수 없다. 그래서 공유할 상태를 부모 컴포넌트에서 선언하고 상태 변경 함수인 setState를 자식 컴포넌트에게 props로 전달하여 수정을 할 수 있도록 상태 끌어올리기를 수행하거나, 추가 라이브러리를 사용하여 상태관리를 한다. 가장 대표적인 라이브러리로 Redux가 있다. 하지만 상태 하나를 관리하기 위한 boilerplate코드가 많이 사용된다. 그래서 이번에는 배우기 쉽고 간단한 Recoil에 대해서 상태관리를 해본다. 리코일 페이스북에서 만든 리액트 상태관리 라이브러리 리액트 문법에 최적화되어있다. 다른 상태관리 라이브러리에 비해 쉽게 배울 수 있다..

무한 스크롤 구현을 위해서 자주 사용되는 IntersectionObserver에 대해서 기본적인 내용 정리 1.옵저버 객체 생성 [new IntersectionObserver] const io = new IntersectionObserver(observerCallback[,options]) 2.수행할 동작[observerCallback] 대상을 감지하면 실행하는 함수로 entries와 observer를 받는다. entries IntersectionObserverEntry 인스턴스를 담은 배열 객체로 가시성과 관련된 속성을 포함한다. observer observerCallback가 호출되는 InterSectionObserver를 가리킨다. const observerCallback = (entries, ob..

상태관리를 위한 훅이다. useState와 유사한 동작을 하지만 좀 더 복잡한 상태 관리를할 때 유용하다. useReducer는 redux와 같은 상태관리 라이브러리에서 사용되는 reducer개념을 기반으로 한다. 1.useState와의 차이점 1️⃣복잡한 상태의 관리 useState는 간단하고 직관적인 상태 관리를 제공한다. 단일 값,객체를 사용하여 상태를 관리하는 반면, useReducer는 보다 복잡한 상태 관리를 위해 사용될때 유용하다. 2️⃣업데이트 방식 useState는 setState함수를 제공하여 상태를 업데이트 한다. useReducer는 액션 객체를 통해 상태를 업데이트한다. 액션이란것은 어떤 type의 업데이트를 수행할건지 설명해주며, 추가적인 데이터를 전달할 수 있다. 3️⃣로직의 ..

1.LifeCycle LifeCycle(생명주기)는 컴포넌트의 생성부터 변화,소멸까지의 과정을 나타낸다. 각각의 과정마다 특정한 작업을 수행 하여 원하는 동작을 수행할 수 있게해주는데, 이를 LifeCycle Method(생명주기 메서드)라고한다. 이러한 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있다. 함수형 컴포넌트에서는 useEffect를 사용하여 각각의 컴포넌트 상태에 대해 작업을 할 수 있다. 2.useEffect 사용 하기 useEffect는 생명주기의 상태인 마운트,업데이트,언마운트 중에 특정 작업을 수행할 수 있게 해준다. 이름에서 알 수 있듯 side Effect를 처리하기 위한 Hook이다. side Effect란 프로그램 실행과는 독립적으로 발생하는 외부적인 변화를 말한다...

유데미 강좌를 통해 작성하였습니다. 간단한 counter증가 예제를 통해 리덕스의 흐름을 복습. 리덕스를 사용하기 위해 라이브러리를 설치해준다. npm install redux react-redux 1.Store 생성하기 Store는 전역 상태를 저장하는 공간이다. 리덕스에서 Store는 하나만 존재해야 한다. 여러개의 스토어를 사용할 수는 있지만, 그럼 개발 도구를 활용해 상태를 추적할 수 없게 된다. store는 reducer를 인자로 받는다. 현재 createStore를 사용하면 취소선이 그어지는데, 리덕스에서 리덕스 툴킷의 configureStore를 쓰길 권장하고 있기 때문이다. 기능상의 문제는 전혀 없으니 사용해도 괜찮지만, 취소선을 없애고 싶다면.. -RTX configureStore를 사용..

[강의자료 복습] 리덕스를 사용하기 앞서 왜 필요하게 되었는지에 대한 이해와 비슷한 역할을 하는 context와 어떤 차이가 있는지를 정리 State의 세 가지 정의 State는 크게 세 가지로 정의 될 수 있다.Local stateCross-Component StateApp-Wide State 1️⃣Local State 하나의 컴포넌트 내에서 영향을 미치는 상태 2️⃣Cross-Component State 다수의 컴포넌트에 영향을 미치는 상태. props를 이용해서 컴포넌트들 간의 상태를 관리 할 수 있다. 3️⃣App-wide State 애플리케이션 모든 컴포넌트에 영향을 미치는 상태. 로그인 정보나 테마 등이 있을 수 있다. Context VS Redux 크로스-컴포넌트 상태와 앱-와이드 상태에서..