diff --git "a/week-05/\352\271\200\354\244\200\354\227\264.md" "b/week-05/\352\271\200\354\244\200\354\227\264.md" new file mode 100644 index 0000000..987ba72 --- /dev/null +++ "b/week-05/\352\271\200\354\244\200\354\227\264.md" @@ -0,0 +1,105 @@ +## 5.1 상태관리는 왜 필요한가? + +상태: 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미 + +분류가능한 + +- UI: 상호 작용이 가능한 모든 요소의 현재 값 +- URL: URL의 parameter +- 폼(form): loading, submit, disabled, validation 등 +- 서버 값: API 호출값 + +### 5.1.1 리액트 상태 관리의 역사 + +리액트는 뷰 라이브러리로써의 역할만 제공을 했으며, 상태관리를 추가적 도입이 필요. +애플리케이션이 비대해지고 상태 추적이 어려워지기 시작했으며 원인을 “양방향 바인딩”. +따라서, 양방향이 아닌 **단반향으로 데이터 흐름 제안(Flux 패턴)** + +- action: 작업을 처리할 액션 타입과 발생 시 함께 포함시킬 데이터. 액션 타입과 데이터를 dispatcher로 전달 +- dispatcher: action을 콜백 함수 형태로 store로 보내는 역할 +- store: 상태의 값과 상태를 변경할 수 있는 메서드 가짐. +- view: 리액트 컴포넌트에 해당하는 부분으로 상태를 표시하고 반응으로 action을 유발 + +### 리덕스의 등장 + +- Flux구조를 구현하면서 Elm 아키텍처를 도입. +- Elm 아키텍처: model, view, update + - model: 애플리케이션의 상태 + - view: 표현하는 HTML + - update: model을 수정하는 방식 +- 그러나, 보일러플레이트 증가 + +### context API의 useContext + +**context는 상태관리가 아닌, 상태 주입** + +16.3버전 이전에도 `getChildContext()`라는 함수를 통해서 context를 인식 가능 + +### 훅의 탄생, 그리고 React Query와 SWR + +함수 컴포넌트에서 활용가능한 훅 API. 상태를 재사용 가능하게 만듦 + +또한, 훅을 활용한 별도의 상태관리 tool들로 React Query와 SWR + +### Recoil, Zustand, Jotai, Valtio에 이르기까지 + +리덕스 라이브러리와 다르게 훅을 이용하여 작은 크기의 상태를 관리. peerDependecies로 react 16.8 이상을 요구하고 있음 + +## 5.2 리액트 훅으로 시작하는 상태관리 + +### useState와 useReducer + +useState를 통해서 상태관리 hook을 재사용 가능하게 작성 가능 + +```tsx +function useCounter(init: number){ + const [ count, setCount ] = useState(init) + + function increase = () => { + setCount(prev => prev + 1) + } + return { counter, increase} +} +``` + +지역적 상태이기에 전역으로 다루이게는 무리 + +### 지역상태의 한계를 벗아나 보자: useState의 상태를 바깥으로 분리하기 + +함수가 리렌더링 되는 조건을 보면: + +- useState, useReducer의 두 번째 인수 호출 +- 부모함수가 리렌더링되거나 해당함수를 다시 실행 + +### useState와 Context + +- useState, useReducer가 가지고 있는 한계, 컴포넌트 내부에서만 사용할 수 있는 지역 상태를 극복하기 위해 외부에 상태를 저장. 이 때 최상단, 필요한 부모, 격리된 자바스크립트 스코프에 저장 가능 +- 이 외부의 상태 변경을 각자의 방식으로 감지해 컴포넌트 렌더링 유발 + +## 상태 관리 라이브러리 Recoil, Jotai, Zustand + +> 라이브러리가 지향하는 목적, 어떻게 상태 관리, 어떻게 전파하고 렌더링하는지에 초점 +> + +Recoil + +- ``의 최상단 + - Recoil의 상태갑은 RecoilRoot로 생성된 Context의 스토어에 저장 + - 스토어에 상태값을 접근할 수 있는 함수가 있으며, 이 함수를 이용해 접근 및 변경 가능 + - 값이 변경되면 이를 참조하고 있는 하위 컴포넌트에 모두 알림 +- atom + - key값은 다른 atom과 구별하는 식별자이기에 유일한 값으로 지정 +- useRecoilValue & useRecoilState + +Jotai + +- Recoil의 atom모델에 영감을 받은 라이브러리 +- atom +- useAtomValue + +Zustand + +- 리덕스에 영감을 받음. 하나의 스토어를 활용하여 내부에서 상태 관리 +- vanilla.ts라는 파일에서 createStore만 export가 되고 있고 useState선언과 분리되어 있기에 수순한 vanilla JavaScript에서도 사용 가능 +- create는 리액트 환경에서, createStore는 vanilla에서 활용?? +- create의 두 번쨰 인수로 미들웨어를 추가할 수 있음