✨ React Deep Dive 스터디 3주차 4-5.1장

Author: ahyeon-jung

03/마님.md

@@ -389,6 +389,8 @@ Next.js는 응답 헤더에 X-Power-by: Next.js 정보를 제공하는데, false
 - URL: 브라우저에서 관리되고 있는 상태값
 - 폼: 로딩중인지, 제출됐는지, 접근이 불가능한지, 값이 유효한지 등
 - 서버에서 가져온 값: 클라이언트에서 서버로 요청을 통해 가져온 값
+상태를 어디에 둘 것인가? 전역 변수? 별도의 클로저? 상태가 유효한 범위? 자식들의 변화 감지?
+ => 점차 증가하는 상태를 효과적으로 관리하는 방법을 고민해야할 필요성 증가
 ### 5.1.1 리액트 상태 관리의 역사
 #### Flux 패턴의 등장 
 순수 리액트에서 할 수 있는 전역 상태 관리 수단은 16.3 버전에 등장한 ContextAPI
@@ -400,11 +402,15 @@ Next.js는 응답 헤더에 X-Power-by: Next.js 정보를 제공하는데, false
 웹 애플리케이션이 비대해지고 상태가 많아짐에 따라 어디서 어떤 일이 일어나서 상태가 변했는지 등을 추적하고 이해하기 어려운 상황
 
 페이스북 팀은 이러한 문제의 원인을 양방향 데이터 바인딩으로 파악하여 단방향으로 데이터 흐름을 변경하는 Flux 패턴을 도입
+![image](https://github.com/learning-with/learning-react/assets/75254185/1c21fd8a-4fdb-441b-8d03-26051aad0e04)
+
 - action: 어떠한 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미. 액션 타입과 데이터를 각각 정의해 디스패처로 보냄
 - dispatcher: 액션을 스토어에 보내는 역할. 콜백 함수 형태로 앞서 액션이 정의한 타입과 데이터를 모두 스토어에 보냄
 - store: 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가지고 있으며, 액션의 타입에 다라 어떻게 이를 변경할지가 정의되어 있음
 - view: 리액트의 컴포넌트에 해당하는 부분. 스토어에서 만들어진 데이터를 가져와 화면을 렌더링하는 역할. 사용자의 입력이나 행위에 따라 상태를 업데이트하고자 할 때 뷰에서 액션을 호출.
 
+데이터의 흐름이 액션이라는 한 방향으로 줄어들어 데이터의 흐름을 추적하기 쉽고 코드를 이해하기 쉬워짐
+
 #### 시장 지배자 리덕스의 등장
 Flux 구조에서 나아가 데이터 흐름을 세 가지로 분류하고, 이를 단방향으로 강제해 웹 애플리케이션의 상태를 안정적으로 관리하고자 하는 Elm 아키텍처 도임
 - model: 애플리케이션의 상태
@@ -430,6 +436,8 @@ props로 상태를 넘겨주지 않더라도 Context API를 사용하면 원하
 
 기존에 무상태 컴포넌트를 선언하기 위해서만 제한적으로 사용됐던 함수형 컴포넌트가 클래스형 컴포넌트 이상의 인기를 얻을 수 있도록 많은 기능을 제공
 
+state를 매우 손쉽게 재사용가능해짐
+
 훅과 state의 등장으로 HTTP 요청에 특화된 상태 관리 라이브러리 React Query와 SWR이 등장
 
 ```
@@ -458,6 +466,27 @@ export default function App() {
 
 #### Recoil, Zustand, Jojai, Valtio에 이르기까지
 최근에는 훅을 활용해 작은 크기의 상태를 효율적으로 관리하는 라이브러리가 등장
+```
+// Recoil
+const counter = atom({ key: 'count', default: 0})
+const todoList = useRecoilValue(counter)
+
+// Jotai
+const countAtom = atom(0)
+const [count, setCount] = useAtom(countAtom)
+
+// Zustand
+const useCounterStore = create((set) => ({
+  count: 0,
+  increase: () => set((state) => ({ count: state.count + 1})),
+}))
+const count = useCounterStore((state) => state.count)
+
+// Valtio
+const state = proxy({ count: 0 })
+const snap = useSnapshot(state)
+state.count++
+```
 ### 5.1.2 정리
 ## 5.2 리액트 훅으로 시작하는 상태 관리
 ### 5.2.1 가장 기본적인 방법: useState와 useReducer