React 전역 상태 관리

1. 전역 상태 관리

애플리케이션 전체에서 공유되는 상태를 중앙에서 관리하고, 이를 필요로 하는 컴포넌트들이 손쉽게 접근하거나 업데이트 할 수 있도록 하는 방식이다. 전역 상태는 로컬 상태(컴포넌트 내부에서만 사용하는 상태)와 달리, 여러 컴포넌트가 동시에 접근하고 사용할 수 있는 데이터를 의미한다.

 

1-1. 전역 상태 관리가 필요한 이유

1. 상태 공유

• 여러 컴포넌트에서 동일한 데이터를 사용해야 할 때, 개별적으로 상태를 관리하면 데이터 동기화가 어려워질수도 있다. 이를 방지하기 위해 전역 상태 관리가 필요하다.

 

2. 복잡한 상태 흐름 관리

• 상태를 부모-자식 간에 계속 전달해야하는 Props Drilling 문제를 해결한다. 전역 상태 관리 도구를 사용하면 상태를 중앙에서 관리해 데이를 필요한 곳에서 바로 사용할 수 있다.

 

3. 예측 가능성

• 전역 상태를 중앙에서 관리하면 상태의 변화를 쉽게 추적하고 디버깅할 수 있다.

 

1-2. 전역 상태 관리의 주요 개념

1. 전역 상태(Store)

• 애플리케이션 전체에서 접근 가능한 중앙 저장소이다. 여기에는 애플리케이션의 공통 상태가 저장된다.

2. 상태 업데이트(Action/Reducer)

• 상태를 변경하려면 특정 규칙에 따라 상태를 업데이트해야 한다. 예를 들어 Redux에서는 action과 reducer를 통해 상태를 업데이트 한다.

3. 상태 접근(Selectors)

• 전역 상태에 저장된 데이터를 특정 컴포넌트가 필요할 때 선택적으로 가져올 수 있다.

4. 구독(Subscription)

• 상태가 변경될 때 이를 자동으로 감지하여 UI를 업데이트한다.

 

2. 전역 상태 관리 라이브러리

2-1. Redux

• 특징: Flux 아키텍처를 기반으로 설계된 상태 관리 라이브러리
• 장점: 예측 가능한 상태 흐름, 강력한 미들웨어, 타임 트래빌 디버깅
• 단점: 보일러플레이트 코드와 복잡성

2-2. Context API(React)

• 특징: React에서 제공하는 내장 상태 관리도구, Context와 Provider를 사용해 전역 상태를 전달
• 장점: 가벼운 상태 관리에 적합하며 추가 라이브러리가 필요 없음
• 단점: 상태가 많아질수록 코드가 복잡해지고, 리렌더링 최적화가 어려움

2-3. MobX

• 특징: 관찰 가능한 상태와 반응형 UI를 제공하는 상태 관리 도구 
• 장점: 간결한 코드, 자동 상태 반응성
• 단점: 상태 추적이 어려울 수 있음

2-4. Zustand

• 특징: React를 위한 경량 상태 관리 라이브러리
• 장점: 간단한 API, React Context보다 빠름
• 단점: 대규모 애플리케이션에는 부적합

2-5. Recoil

• 특징: React를 위해 Facebook에서 만든 상태 관리 도구
• 장점: 컴포넌트 간 상태 공유가 쉽고, 비동기 상태 관리에 적합
• 단점: 초기 학습 곡선

2-6. Jotai

• 특징: 단순하고 직관적인 React 상태 관리 도구
• 장점: 최소한의 코드로 상태를 관리
• 단점: 고급 기능은 Redux 만큼 풍부하지 않음

 

3. 전역 상태 관리의 장점

3-1. 중앙 집중화

• 상태를 한 곳에서 관리하여 데이터 흐름이 명확함

3-2. 확장성

• 애플리케이션 규모가 커져도 상태를 체계적으로 관리할 수 있다.

3-3. 재사용성

• 상태와 로직을 재사용할 수 있어 코드 중복이 줄어든다.

3-4. 효율성

• 불필요한 상태 전달(Props Drilling)을 줄이고, 필요한 컴포넌트에서만 상태를 구독하도록 설정할 수 있다.

 

4. 전역 상태 관리의 단점

4-1. 복잡성 증가

• 작은 프로젝트에서 전역 상태 관리 도구를 사용하면 오히려 비효율적일 수 있다.

4-2. 성능 이슈

• 상태가 자주 업데이트되며, 모든 구독 컴포넌트가 리렌더링될 위험이 있다.

4-3. 학습 곡선

• Redux나 MobX 같은 도구는 배우는 데 시간이 걸린다.