[카카오테크 부트캠프] Context API를 이용한 상태 관리

Context API는 React에서 전역적으로 상태를 관리하기 위한 메커니즘입니다. 이는, 모든 컴포넌트 혹은 개발자가 설정한 범위 내의 컴포넌트에서 상태를 공유할 수 있다는 것을 의미합니다.

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

1. 복잡한 컴포넌트 계층 구조에서의 상태 전파

• React에서는 props를 통해 상위에서 하위로 데이터를 전달하는 방식을 사용하는데, 컴포넌트 계층 구조가 깊어질수록 데이터 전달이 번거로워질 수 있습니다. (prop drilling 문제)
• 전역 상태 관리는 중첩된 컴포넌트 구조에서 상태를 일관되게 유지하고, 필요한 곳에서 쉽게 접근할 수 있도록 도와줍니다.

2. 상태의 공유와 재사용성 증대

• 사용자 인증 상태, 테마 등 여러 컴포넌트가 동일한 상태를 공유해야 하는 경우가 있습니다.
• 전역 상태를 사용하면 이러한 데이터를 각 컴포넌트마다 props로 전달하지 않고, 필요한 곳에서 직접 접근할 수 있어 코드의 중복을 줄이고 재사용성을 증대시킬 수 있습니다.

3. 상태 관리의 중앙 집중화

• 전역 상태 관리는 애플리케이션 내에서 상태를 중앙 집중화하여 관리할 수 있습니다.
• 이는 코드의 유지보수성을 높이고, 버그를 줄이는 데 도움을 줍니다.
• 상태 관리 로직이 하나의 곳에서 관리되기 때문에 상태 업데이트 로직을 추적하고 이해하기 쉬워집니다.

Context API 사용 시 고려 사항

• 복잡성 증가: Context를 사용하면 애플리케이션의 전역 상태가 많은 컴포넌트에 걸쳐 퍼질 수 있습니다. 이로 인해 상태의 흐름을 이해하기 어려워질 수 있고, 코드의 복잡성이 증가할 수 있습니다.
• 성능 문제: Context를 사용할 때 모든 Consumer는 Provider가 업데이트될 때마다 다시 렌더링됩니다. 따라서 Provider가 자주 업데이트되는 경우 성능 문제가 발생할 수 있습니다.

다양한 전역 상태 관리 라이브러리

• Redux: 가장 널리 사용되는 상태 관리 라이브러리로, 복잡한 애플리케이션 상태 관리에 적합합니다. Flux 아키텍처 기반으로 설계되어 있으며, 예측 가능한 상태 변경과 미들웨어를 통한 확장성이 큰 장점입니다.
• MobX: 상태 관리와 관련된 반응형 프로그래밍 패러다임을 지원하는 라이브러리입니다. Observables와 함께 사용하여 상태 변경을 감지하고 자동으로 UI를 업데이트할 수 있습니다.
• Recoil: Facebook에서 개발한 상태 관리 라이브러리로, React 애플리케이션의 복잡한 상태를 관리하기 위한 목적으로 설계되었습니다. 상태의 원자성을 중심으로 한 다양한 고급 기능을 제공합니다.
• Zustand: 간단하고 직관적인 상태 관리를 위한 라이브러리입니다. 컴포넌트 내에서 간편하게 사용할 수 있는 API와 함께 상태를 관리하며, 컨텍스트 API보다 더 단순하고 성능이 우수하다는 장점이 있습니다.