Before Learn...
React 개발 시
UI를 컴포넌트 단위로 생각하는 컴포넌트 우선 개발 방식을 사용한다.
상태가 어디에 위치해야 하는지 생각하는 게 중요하다.
✅ TIL
- React 상태 관리
React 상태 관리
상태: UI에 동적으로 표현되는 데이터 (변하는 데이터)
상태 변경이 일어나는 컴포넌트 / 상태 변경의 영향을 받는 컴포넌트로 나뉜다.
Side Effect: 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인
네트워크 요청, API 호출 등
Side Effect를 최대한 배제하고 컴포넌트를 만든다.
fetch API 등 Side Effect에 의존적일 경우 로딩 중 상태를 반드시 고려해야 한다.
React로 사고하기 공식문서
목업으로 시작하기
1. UI를 컴포넌트 계층 구조로 나누기
2. React로 정적인 버전 만들기 (state 사용하지 않기)
3. UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기
4. state가 어디에 있어야 할 지 찾기
5. 역방향 데이터 흐름 추가하기
상태는 로컬 상태 / 전역 상태로 구분할 수 있다.
로컬 상태는 다른 컴포넌트와 데이터를 공유하지 않는다.
전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼친다.
서로 다른 컴포넌트가 동일한 상태를 다룰 때에는, 서로 다른 출처로부터 상태를 가져오는 것을 피해야 한다.
데이터 무결성
데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어
안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것"Single source of truth" (신뢰할 수 있는 단일 출처)
데이터 무결성을 위해 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 와야 한다.
전역 상태 관리
Globalization 설정
사용자가 사용하는 브러우저나 운영체제가 특정 언어를 사용하고 있음을 알아내서
UI에 필요한 텍스트 리소르를 따로 저장한 후 전역 상태로 관리하기도 한다.
Undo/Redo를 위한 history 기능
화면에 표시되는 모든 내용을 전부 객체로 만들어서 저장하면, 원하는 특정 상태를 바탕으로 컴포넌트를 표현할 수도 있다.
상태 관리 라이브러리
컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 한다.
- React Context
- Redux
- MobX
- 전역 상태를 위한 저장소를 제공한다.
- props drilling 문제를 해결한다. (자식의 자식의 자식 컴포넌트까지 props를 내려꽂는 것)
- 상태 관리 라이브러리 없이도 충분히 규모 있는 애플리케이션을 만들 수 있다.
