[김동규] 5장: 리액트와 상태 관리 라이브러리

5장/김동규.md

@@ -0,0 +1,83 @@
+# 5장 리액트와 상태 관리 라이브러리
+
+## 5.1 상태 관리는 왜 필요한가?
+
+상태는 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다. 대표적으로 아래와 같은 값이다.
+
+- UI, URL, Form, 서버에서 가져온 값
+
+```생각 & 의견
+왜 데이터들을 꼭 State(상태)라고 부를까 GPT 형님한테 물어보니, "시스템이나 애플리케이션의 현재 상황"을 나타내기 때문에 상태라고 부른다고 합니다.
+
+프론트엔드 개발을 하면 이런 상태관리가 (얕은 시야로 보기에..)백엔드보다 많이 난이도가 높아 보이는데, 유저의 인터렉션이라는 개발로 정의되지 않은 변수도 상태값으로 편입되기 때문에 어려운게 아닐까 생각이 드네요!
+```
+
+### 5.1.1 React 상태관리 역사
+
+#### Flux 패턴의 등장
+
+양방향 데이터 바인딩의 문제점을 Action -> Dispatcher -> Model -> View 의 단방향흐름으로 데이터를 제어 하는 것
+
+```생각 & 의견
+실제로 Vue에서는 React와 다르게 양방향 바인딩을 지원하고 있어 자주 사용했습니다.
+Flux 패턴이 등장한 이유 처럼 소프트웨어가 복잡해지면 데이터 흐름을 찾아가기 어려운 문제가 확실하게 있으나, 책에서 언급된 코드의 양이 줄어든다와 간단한 규모에서는 상당히 편리합니다!
+
+ex) 모달 open, close 제어 등..
+```
+
+#### 시장의 지배자 Redux
+
+- 기존의 많은 문제를 해결했다.
+- Elm 아키텍처의 영향을 받았다.
+- 보일러플레이트 코드가 너무 많아서 비판을 많이 받았다.
+
+```생각 & 의견
+Redux의 문제를 해결하기 위해, Redux Toolkit(https://redux-toolkit.js.org/)이라는 것도 출시 되었습니다.
+```
+
+#### Context API와 useContext
+
+Props를 간편하게 넘겨주기 위해 16.3 버전에서 Context API 출시 다만 아래와 같은 문제점이 있었다.
+
+- 상위 컴포넌트가 렌더링 되면 `shouldComponentUpdate`가 항상 `true`를 반환하여 불필요한 렌더링이 일어난다.
+- context를 인수로 받기 때문에 컴포넌트와 결합도가 높다.
+- 렌더링을 막아주는 기능이 없다.
+
+```생각 & 의견
+context가 아니더라도 상태관리를 해주는 무언가를 사용한다면 결합도가 없을 수가 없지 않을까...
+```
+
+## 5.2 리액트 훅으로 시작하는 상태 관리
+
+### 5.2.1 useState와 useReducer
+
+지역적인 상태관리 방법. 컴포넌트 재 랜더링으로 인한 초기화를 피하고 싶다면 부모 컴포넌트에서 상속받자.
+
+### 5.2.2 useState 상태를 바깥으로 분리하기
+
+리액트 렌더링 원리에 의해 컴포넌트 외부로 값을 빼더라도 "리 렌더링" 트리거를 넣어줘야한다.
+
+- useEffect 혹은 useState/useReducer의 두번째 인자 등..
+
+### 5.2.3 useState와 Context를 동시에 사용하기
+
+여러개의 서로 다른 데이터를 공유해 사용하고 싶을 때 사용. Context를 활용해 해당 스토어를 하위 컴포넌트에 주입한다!
+
+### 5.2.4 상태 관리 라이브러리 Recoil, Jotai, Zustand
+
+- Recoil
+  - ReocilRoot 선언해 하나의 스토어 생성
+  - atom이라는 상태 단위를 스토어 등록
+  - atom은 key 값으로 구별
+  - hook을 통해 atom의 변화를 구독
+  - 값이 변경된다면 forceUpdate 같은 기법을 통해 리렌더링, 최신 atom값을 가져옴
+- Jotai
+  - Recoil의 컨셉을 가져와 사용하고 단점을 해결하여 사용
+  - Bottom-up 접근법을 취하고 있어 불필요한 렌더링이 일어나지 않음
+  - Key를 별도로 관리하는 부분을 추상화 하여 사용자가 관리할 필요 없다.
+  - 객체 참조를 WeakMap에 보관해 해당 객체 자체가 변경 되지 않는 한 객체의 참조를 통해 관리 가능
+- Zustand
+  - 리덕스에 영감을 받아 만들었다. 중앙 집중형
+  - 빠르고 간단하게 스토어를 만들어서 사용 가능
+  - 특정 프레임워크에 종송적이지 않음
+  - 번들 사이즈가 엄청 낮음