10.1 상태 관리
.
.
.
1. 상태 State
- 상태란 ?
: 리액트 애플리케이션에서의 상태는 렌더링에 영향을 줄 수 있는 동적인 데이터 값.
(리액트 공식 문서 : 렌더링 결과에 영향을 주는 정보를 담은 순수 자바스크립트 객체)
- 지역 상태 Local State
: 컴포넌트 내부에서 사용되는 상태
주로 useState 훅을 가장 많이 사용하며 때에 따라 useReducer와 같은 훅을 사용하기도 함.
예) 체크박스의 체크 여부나 폼의 입력값 등
- 전역 상태 Global State
: 앱 전체에서 공유하는 상태
여러 개의 컴포넌트가 전역 사태를 사용할 수 있으며 상태가 변경되면 컴포넌트들도 업데이트됨.
Prop drilling 문제를 피하고자 지역 상태를 해당 컴포넌트들 사이의 전역 상태 공유 가능
Prop drilling
: props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 해당 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야 하는 과정.
- 서버상태 Server State
: 사용자 정보, 글 목록 등 외부 서버에 저장해야 하는 상태들
UI상태와 결합하여 관리 -> 로딩 여부나 에러 상태 등을 포함
최근, react-query, SWR와 같은 외부 라이브러리를 사용하여 관리
2. 상태를 잘 관리하기 위한 가이드
상태(State)란 무엇이고, 정의할 때 고려할 사항
상태(State)는 리액트 컴포넌트에서 변화하는 데이터를 관리하기 위한 도구로, 상태가 업데이트되면 컴포넌트가 리렌더링되어 UI가 갱신됨. 상태는 최소화해야 유지보수와 성능 관리가 용이해짐.
상태를 정의할 때 고려할 두 가지:
1. 시간이 지나도 변하지 않는 값은 상태가 아님.
한 번 정의된 이후 변하지 않는 값은 상태로 관리하지 않음.
정적인 값은 상수 변수, ref, props로 관리하면 됨.
예) 컴포넌트 초기 마운트 시 설정되는 데이터는 상태로 정의하지 않음.
2. 파생된 값은 상태가 아님.
부모에게서 전달받을 수 있는 props이거나 기존 상태에서 계산될 수 있는 값은 상태가 아님.
다른 상태나 props로 계산 가능한 값은 별도로 상태로 정의하지 않음.
예) height = width * 2 같은 계산된 값은 상태 대신 렌더링 중 직접 계산하거나 useMemo를 활용함.
상태 관리 원칙
필요한 최소한의 상태만 유지.
계산 가능한 값은 상태로 만들지 않음.
상태는 변해야 하는 독립적인 값만 정의함.
- 비유
상태는 "변하는 데이터의 원천"임.
예를 들어, 시험 점수는 상태지만, 시험 이름(변하지 않음)이나 평균 점수(계산된 값)는 상태가 아님.
3. useState vs useReducer, 어떤 것을 사용해야 할까
- useState vs useReducer 사용 권장 경우
- 다수의 하위 필드를 포함하고 있는 복잡한 상태 로직을 다룰 때- 다음 상태가 이전 상태에 의존적일 때
useState는 간단한 상태 관리를 위해 사용됨. 한두 개의 상태를 업데이트하거나 로직이 단순한 경우 적합함.
예를 들어, 카운터나 토글 버튼과 같은 간단한 상태에 적합함.
useReducer는 복잡한 상태 관리나 상태가 여러 값으로 구성된 경우 사용됨. 상태 업데이트 로직이 복잡하거나, 상태와 관련된 여러 동작이 필요한 경우 효과적임.
예를 들어, 폼 관리나 상태 변경이 조건에 따라 다양한 액션을 처리해야 하는 경우 적합함.
- 간단한 상태는 useState, 복잡한 상태 로직은 useReducer를 사용함.
둘 다 상태 관리용 훅이지만, useReducer는 Redux와 유사한 패턴을 제공하며 확장성이 필요할 때 유용함.
3. 전역 상태 관리와 상태 관리 라이브러리
- 상태는 사용하는 곳과 최대한 가까워야 하며 사용 범위를 제한해야 함.
상태를 여러 컴포넌트에서 공유하는 전역 상태로 정의할 때 어떤 방법을 사용할 수 있고 어떻게 관리하는지 살펴보쟝
- 컨텍스트 API(Context API) + useState 또는 useReducer
- 외부 상태 관리 라이브러리 (Redux, MobX, Recoil 등)
- 컨텍스트 API(Context API)
: 컨텍스트 API는 React에서 컴포넌트 트리 전체에 데이터를 전역적으로 전달하기 위한 기능.
부모에서 자식으로 props를 계속 전달하는 번거로움을 줄여줌.
전역 상태 관리나 테마, 인증 정보, 언어 설정 등 공유 데이터를 관리할 때 유용함.
React.createContext로 컨텍스트를 생성하고, Provider로 데이터를 제공하며, useContext로 데이터를 소비함.
간단한 전역 상태 관리에는 충분하지만, 복잡한 상태 관리에는 Redux 같은 외부 라이브러리가 적합함.
10.2 상태 관리 라이브러리
.
.
.
1. MobX
: 객체 지향 프로그래밍과 반응형 프로그래밍 패러다임의 영향을 받은 라이브러리
상태 변경 로직 단순화, 복잡한 업데이트 로직을 라이브러리에 위임 가능.
- 다만
데이터가 언제 어덯게 변하는지 추적하기 어렵기 때문에 트러블 슈팅에 어려움을 겪을 수 있음.
2. Redux
: 함수형 프로그래밍의 영향을 받은 라이브러리
특정 UI 프레임워크에 종속되지 않아 독립적으로 상태 관리 라이브러리 사용 가능.
상태 변경 추적에 최적화 -> 특정 상황에서 발생한 애플리케이션 문제 원인 파악에 용이.
- 하지만
단순한 상태 설정에도 많은 보일러플레이트가 필요, 사용 난도가 높다는 단점.
3. Recoil
: 상태를 저장할 수 있는 Atom과 해당 상태를 변형할 수 있는 순수 함수 selector를 통해 상태를 관리하는 라이브러리.
Redux에 비해 보일러플레이트가 적고 난이도가 쉬워 배우기 쉬움.
-
다만
라비르러리가 아직 실험적인 상태 -> 다양한 요구 사항에 대한 충분한 검증이 이뤄지지 않음. -
Recoil 상태를 공유하기 위해 컴포넌트들은 RecoilRoot 하위에 위치해야 함.
4. Zustand
: Flux 패턴을 사용하며 많은 보일러플레이트를 가지지 않는 훅 기반의 편리한 API모듈을 제공.
클로저 활용 -> 스토어 내부 상태 관리 -> 특정 라이브러리에 종속되지 않는 특징이 있음.
상태와 상태 변경하는 액션을 정의 & 반환된 훅을 어느 컴포넌트에서나 임포트하여 원하는 대로 사용 가능.
도서참조 : 우아한 타입스크립트 with 리액트
