React는 *상태(state) 관리를 위한 라이브러리는 아니다. 그러나 상태 관리의 주요 원칙을 배우면 리액트 컴포넌트 간 느슨하게 결합된 구조적으로 좋은 코드를 작성할 수 있다.

상태(state) : UI에 동적으로 표현 될 데이터

Side Effect : 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인. 대표적인 사례는 네트워크 요청(백엔드 API 요청)

presentation 컴포넌트 : fetch와 같은 API 요청이 없이도 작동되는 컴포넌트. 즉, 테스트 데이터라 할지라도 컴포넌트는 표현(presentation) 할 수 있어야한다.

불가치한 Side Effect와 상태 : 데이터가 서버에 있다면 네트워크 요청(예: fetch) 때문에 시간이 걸릴 수 있다. 이런 경우 로딩 중 상태도 고려해야한다.

React로 사고하기

https://ko.reactjs.org/docs/thinking-in-react.html

1. UI를 컴포넌트 계층 구조로 나누기

2. 정적인 버전 만들기 (Props)

TIP : 간단한 예시에서는 보통 하향식으로 만드는 게 쉽지만 프로젝트가 커지면 상향식으로 만들고 테스트를 작성하면서 개발하기가 더 쉽다.

1. UI State를 어디에 적용할지 생각 (최소한으로 하지만 완전하게)

2. State 위치 찾기

TIP :

4-1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다. 4-2. 공통 소유 컴포넌트 (common owner component)를 찾는다. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트). 4-3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다. 4-4. state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가하세요.

1. 역방향 데이터 흐름 추가하기 (데이터 끌어올리기)

상태 관리를 위한 툴 기능

• 전역 상태 저장소 제공.

• Props drilling 이슈 해결 Props drilling 이슈 : 예를 들어, A라는 컴포넌트에 상태가 있고, I라는 컴포넌트가 해당 상태를 사용한다고 하면, 그 중간에 존재하는 컴포넌트 들은 굳이 해당 상태가 필요하지 않음에도, 컴포넌트에 props를 만들어 자식 컴포넌트에 넘겨주어야 했다.

상태 관리를 위한 툴

• React Context
• Redux
• MobX

상태 관리 툴이 반드시 필요하진 않다. 상태 관리 툴이 없어도 충분히 규모있는 애플리케이션을 만들 수 있다. React 공식문서의 “React로 사고하기”만 잘 따라와도 대부분의 문제를 해결할 수 있다. 그러므로 장단점을 분명히 인지하고 상태 관리 툴을 사용.