[준열] 5주차

week-05/김준열.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
+
+- `<RecoilRoot />`의 최상단
+    - 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의 두 번쨰 인수로 미들웨어를 추가할 수 있음