Achievement Goals
- 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
- Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
- Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
- Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
- Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.
Chapter 1 - 상태관리
1. 프론트엔드 개발에서의 상태관리
상태: UI에 동적으로 표현될 데이터
상태 변경이 일어나는 곳과 상태 변경의 영향을 받는 곳으로 구분
Side Effect : 상태를 다룰 때 고려해야 할 것. 백엔드 API요청. 함수 입력 외에도 함수의 결과에 영향을 미치는 요인
presentation 컴포넌트 : 서버 데이터의 입력이 없더라도 작동하는 컴포넌트. Side Effect를 배제하고 컴포넌트 제작
상태의 2가지 구분
로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태. 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터(input/select box)
전역 상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태. 장바구니에 담긴 물품, 데이터 로딩 여부(로딩 중)
서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 서로 다른 출처가 있어도 상관없음
그러나 동일한 상태를 다룰 때는 서로 다른 출처로 부터 가져오는 것을 피해야 한다.
만일 사본이 있을 경우 두 데이터는 서로 동기화 하는 과정이 필요하는데 이는 문제 해결을 어렵게 만든다.
데이터 무결성: 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고
데이터 상태들을 항상 옳게 유지하는 것 => Single source of truth(신뢰할 수 있는 단일 출처)
상태 관리 툴 : React Context, Redux, Mobx (전역 상태 저장소 제공, Props drilling<프로퍼티 내려꽂기> 이슈 해결)
Chapter 2 - Redux
React : 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처
Redux : 컴포넌트와 상태를 분리하는 패턴
Redux는 상태 관련 라이브러리(React의 하위 라이브러리, 관련 라이브러리로 오해).
Redux활용해 상태 변경 로직을 컴포넌트로 부터 분리하면 표현에 집중한 보다 단순한 함수 컴포넌트를 제작할 수 있음
Achievement goals
- 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
- Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
- Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
- Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
- Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.
(1) Intro to Redux
형제 컴포넌트들 간에 데이터를 주고 받을 때 부모 컴포넌트를 통해서 주고 받는 것이 복잡하다.
- Sing source of truth : 데이터를 저장하는 공간은 한곳(Store)
- State is read-only : 액션 객체를 통해 state 변경
- Changes are made with oure functions : Reducer와 연결
Store : 상태가 관리되는 단 한곳의 공간
Action : simple js object
Reducer : 현재 상태와 Action을 이용해 다음 상태를 만들어냄
Redux 장점
- 상태를 예측 가능하게 만들어 준다.
- 유지 보수
- 디버깅에 강하다(action과 state log 기록). Redux DevTool
- (순수함수 사용하기 때문에)테스트를 붙이기 쉽다.
(2) Cmarket Redux
여러 컴포넌트를 거쳐서 props를 받아야 하는 번거로움. 고충(props drilling, lifting state up 현상)
전역 상태를 담은 Store가 있다면? 그리고 Store의 Dispatch를 통해 각 컴포넌트에 props를 보낼 수 있다면?
전역에서 관리할 수 있는 상태 관리 라이브러리 Store