Achievement Goals
상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.
프론트엔드 개발에서의 상태 관리
상태: 변하는 데이터, 특히 UI에 동적으로 표현될 데이터
Side Effect: 상태를 다룰 때에 주요 고려 대상, 함수의 입력 외에도 함수의 결과에 영향을 주는 요인, 네트워크 요청, API 호출
React의 주요 개발 원칙: UI를 컴포넌트 단위로 보는 것, fetch와 같은 api요청이 없이도 컴포넌트가 작동되도록 만들어야 함, 가짜데이터를 제공하더라도 기능을 표현하는 자체에 집중해야 함, 이를 (presentation component)라고 부르기도 함
하지만, 서버에 데이터가 있다면 네트워크 요청 때문에 오래 걸릴 수 있다.
이러한 '로딩 중' 상태를 항상 고려해야 함. (isLoading = true;)
https://ko.reactjs.org/docs/thinking-in-react.html
상태의 두가지 구분
로컬 상태 - 특정 컴포넌트 안에서만 관리되는 상태
대부분의 경우 form을 이용한 상태는 로컬, input box, select box, radio button 등
전역 상태 - 프로덕트 전체 또는 여러 컴포넌트에서 관리되는 상태
다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태, 데이터 로딩 여부(로딩중)도 전역 상태
다른 컴포넌트가 사용하는 상태의 종류가 다르면, 다른 source(출처)가 있어도 상관 없지만,
동일한 상태를 다룰 때엔 같은 출처에서 가져와야 함, 하나의 출처는 전역 공간이라고 볼 수 있다
이는 데이터 무결성, Single source of truth(신뢰할 수 있는 단일 출처) 원칙
(만일 출처가 사본이 있을 경우에는, 서로 동기화(sync)하는 과정이 필요하고, 이는 문제를 어렵게 만듬. 불필요한 과정이 생기고 과정이 복잡해진다. 지양할 것.)
전역 상태 관리 Case study
- 네이버 또는 다른 사이트의 다크 모드: theme에 따라 변경되야 함
- 국제화(Globalization) 설정: 언어에 따라 변경되야 함
- 포토샵 또는 일러스트레이터의 히스토리 기능/Undo/Redo: 화면의 표시 내용 전체를 객채로 저장해 원하는 특정 상태를 바탕으로 컴포넌트를 표현하는 원리
상태 관리를 위한 각종 툴: React Context, Redux, MobX
전역 상태 저장소를 제공
props drilling 문제를 해결: 라는 컴포넌트에 상태가 있고, 라는 컴포넌트가 해당 상태를 사용한다고 하면, 그 중간에 존재하는 컴포넌트는 상태가 필요하지 않아도, props를 만들어 자식 컴포넌트로 전달해줘야 했음, 이를 전역 상태 저장소를 통해 접근시켜 해결하였음
상태 관리 툴은 필수는 아니다, 기본기인 '상태가 어디에 위치해야 하는가'를 먼저 익히자.
