[리액트] 전역 상태 관리

전역 상태 관리란 무엇인가?

전역 상태 관리는 여러 컴포넌트에서 공유해야 하는 상태를 한곳에서 중앙 집중적으로 관리하는 것을 의미한다. 예를 들어, 로그인한 사용자의 정보, 설정 값, 테마 등이 전역 상태에 해당한다. 이러한 전역 상태를 각각의 컴포넌트에서 일일이 관리하는 것은 효율적이지 않다. 따라서 전역 상태 관리는 상태를 효율적으로 관리하기 위한 필수적인 도구다.

왜 전역 상태 관리를 사용해야 하는가?

1. 데이터 일관성: 상태가 여러 곳에서 관리될 경우 데이터 불일치 문제가 발생할 수 있다. 중앙에서 관리하면 이런 문제를 피할 수 있다.
2. 코드 재사용성: 상태 관리 로직을 한 곳에서 관리하므로, 필요한 로직을 재사용하기 쉽다.
3. 유지보수: 상태가 어떻게 변경되고 전파되는지 명확하기 때문에, 디버깅이나 추가 기능 구현이 간단해진다.

전역 상태 관리를 사용하지 않을 경우

전역 상태 관리를 사용하지 않을 경우, 주로 부모-자식 컴포넌트 간에 props를 통해 상태를 전달한다. 아니면, 커스텀 이벤트를 사용해서 상태를 관리할 수도 있다.

어떻게 상태를 전달하나?

1. Props 전달: 상위 컴포넌트에서 하위 컴포넌트로 props를 통해 상태를 내려보낸다.
2. Callback 함수: 하위 컴포넌트에서 상태를 변경할 필요가 있을 경우, 상위 컴포넌트에서 변경을 위한 함수를 props로 전달한다.

불편한 점은?

1. Props 드릴링: 상태를 가장 하위 컴포넌트까지 전달해야 하는 경우, 중간에 있는 모든 컴포넌트들을 거쳐야 한다.
2. 데이터 일관성: 여러 컴포넌트에서 같은 상태를 관리할 경우, 일관성을 유지하기 어렵다.
3. 재사용성: 같은 상태 로직을 여러 곳에서 사용할 경우, 코드를 중복으로 작성해야 할 수 있다.

일반적으로 전역 상태 관리로 관리하는 상태들

1. 사용자 인증 정보: 로그인한 사용자의 정보나 토큰 등
2. 앱 설정: 사용자가 설정한 테마, 언어, 레이아웃 등
3. 캐시된 데이터: 서버에서 가져온 데이터를 재사용할 경우
4. 알림 및 메시지: 알림이나 오류 메시지 등의 전역적인 UI 상태
5. 쇼핑 카트: 온라인 쇼핑 사이트에서 사용자가 담은 상품 목록 등

이렇게 보면 전역 상태 관리가 필요한 상황과 그렇지 않은 상황이 명확히 구분된다. 따라서 상황에 따라 가장 적절한 상태 관리 전략을 선택하는 것이 중요하다.

리액트에서의 전역 상태 관리 도구

1. Context API: 리액트 팀이 공식적으로 지원하는 상태 관리 도구다. useState나 useReducer와 함께 사용하여 상태를 관리한다.
2. Redux: 가장 널리 알려진 상태 관리 라이브러리 중 하나다. 미들웨어 지원, 타임 트래블 디버깅, 커뮤니티와의 호환성 등 많은 이점이 있다.
   • Redux Toolkit: Redux Toolkit은 Redux의 공식 도구세트로, 상태 관리를 좀 더 간단하고 효율적으로 할 수 있도록 도와준다. 기본 Redux 설정은 코드가 많고 반복적일 수 있는데, Redux Toolkit은 이런 부분을 최소화해준다.

다른 전역 상태 관리 라이브러리들

1. MobX: 객체 지향적인 접근으로 상태 관리를 할 수 있다. 데코레이터를 활용하여 코드를 더 깔끔하게 유지할 수 있다.
2. Recoil: 페이스북에서 개발한 상태 관리 라이브러리로, 아토믹 디자인을 통한 세밀한 상태 관리가 가능하다.
3. jotai: 아토믹 디자인 원칙에 기반한 상태 관리 라이브러리다. Recoil과 유사하나 더 경량화되어 있다.
4. zustand: 함수형 프로그래밍 패러다임을 적용한 작은 라이브러리로, 쉽게 상태 관리를 할 수 있다.

각 도구와 라이브러리의 차이, 장단점

1. Context API
   • 장점: 별도의 라이브러리 설치가 필요 없고, 리액트의 내장 기능이므로 학습 곡선이 낮다.
   • 단점: 상태 로직이 복잡해지면 관리하기 어렵다. 또한, 리렌더링 효율이 떨어질 수 있다.
2. Redux
   • 장점: 강력한 미들웨어 지원, 커뮤니티가 활발하므로 다양한 자료와 플러그인이 있다.
   • 단점: 초기 설정과 학습 곡선이 높다. 또한, 간단한 상태 관리에는 오버킬이 될 수 있다.
3. Redux Toolkit
   • 장점:
     1. 보일러플레이트 코드 최소화: 액션 생성 함수, 리듀서, 슬라이스 등을 쉽게 만들 수 있다.
     2. Immer 라이브러리 포함: 불변성을 쉽게 관리할 수 있다.
     3. 미들웨어 기본 설정: Redux Thunk가 기본적으로 내장되어 있다.
   • 단점: 기본 Redux를 모르는 상태에서 Toolkit을 시작하면, 내부가 어떻게 동작하는지 이해하기 어려울 수 있다.
4. MobX
   • 장점: 자유도가 높고, 객체 지향 프로그래밍에 친화적이다.
   • 단점: 리액트와의 통합이 쉽지 않을 수 있다. 디버깅이 어려울 수 있다.
5. Recoil
   • 장점: 아토믹 디자인 원칙을 따라 세밀한 상태 관리가 가능하다.
   • 단점: 아직 실험적이고, 커뮤니티 지원이 부족하다.
6. jotai
   • 장점: Recoil과 유사하게 아토믹 디자인을 지원하지만 더 경량화되어 있다.
   • 단점: 아직 새로운 라이브러리로, 문서와 커뮤니티 지원이 부족할 수 있다.
7. zustand
   • 장점: 함수형 프로그래밍 패러다임을 적용하여 간단하게 상태를 관리할 수 있다.
   • 단점: 대규모 애플리케이션에서는 다른 라이브러리에 비해 관리가 어려울 수 있다.

결론

전역 상태 관리는 복잡한 애플리케이션에서 상태를 일관되게 관리할 수 있게 해준다. 리액트에서는 다양한 도구와 라이브러리가 있어서, 프로젝트의 요구사항과 팀의 선호에 따라 선택할 수 있다. Redux나 MobX, Recoil처럼 잘 알려진 라이브러리부터, jotai나 zustand처럼 더 새롭고 경량화된 라이브러리까지 다양한 옵션이 있다. 이 중 Redux Toolkit은 Redux를 더 쉽고 간결하게 사용할 수 있게 도와주는 유용한 도구세트다.

전역 상태 관리는 복잡한 앱을 구축할 때 필수적인 부분이다. 여러 전역 상태 관리 방법의 장단점을 이해하고, 프로젝트에 가장 적합한 방법을 선택하는 것이 중요하다.