[React] React의 전역 상태 관리

728x90

React로 애플리케이션을 개발하다 보면 컴포넌트 간에 데이터를 공유해야 하는 상황에 자주 직면하게 됩니다. 간단한 애플리케이션에서는 props를 통해 데이터를 전달하는 것으로 충분하지만, 애플리케이션의 규모가 커지고 컴포넌트 트리가 깊어질수록 props drilling (상위 컴포넌트에서 하위 컴포넌트로 여러 단계를 거쳐 props를 전달하는 현상) 문제가 발생하여 코드를 복잡하게 만들고 유지보수를 어렵게 만듭니다.

이러한 문제를 해결하고 애플리케이션의 모든 컴포넌트에서 접근하고 업데이트할 수 있는 데이터를 효율적으로 관리하기 위해 전역 상태 관리(Global State Management)가 필요한데요. 오늘은 전역 상태 관리에 대해서 알아보도록 하겠습니다.

1. 전역 상태 관리란?

리액트는 useState와 useReducer 훅을 사용해 컴포넌트 내부의 상태를 관리할 수 있는데요. 하지만 useState와 useReducer는 컴포넌트 내부 상태만 관리하므로, 다른 컴포넌트와 상태를 공유할 수 없습니다. 다른 컴포넌트와 상태를 공유하거나, 애플리케이션 전체에서 상태가 연동되게 하려면 전역 상태 관리를 사용해야 하는데요.

전역 상태 관리는 애플리케이션 전체, 혹은 여러 컴포넌트가 상태를 공유해야하는 데이터를 한 곳에 모아두고, 필요할 때 언제든지 접근하고 변경할 수 있도록 돕는 개념입니다. 이렇게 전역적으로 관리되는 변수를 수정할 경우, 공유된 모든 컴포넌트에서 리렌더링이 일어나게 되죠.

2. 전역 상태 관리가 필요한 경우 예시

전역 상태 관리가 필요한 경우들에는 어떤 것들이 있을까요?

2.1 인증 상태 관리

사용자가 로그인했는지, 어떤 권한을 가지고 있는지에 따라 앱의 UI가 바뀌는 경우가 많습니다. 사용자 로그인 여부, 사용자 정보, 그리고 API 호출 시 필요한 인증 토큰 등을 전역 상태로 관리하면 앱의 어느 컴포넌트에서든 쉽게 접근하고 활용할 수 있습니다. 예를 들어, 로그인 상태에 따라 '로그인' 버튼 대신 '로그아웃' 버튼을 보여주거나, 관리자에게만 특정 메뉴를 노출하는 등의 작업을 효율적으로 처리할 수 있겠죠?

2.2 테마 및 환경 설정

다크모드, 폰트 크기, 언어와 같은 전역 설정은 모든 컴포넌트에서 접근 가능해야 하며, 설정 변경 시 전체 컴포넌트의 UI가 업데이트되는 식으로 구현하는 게 좋습니다. A화면에서 다크 모드로 설정했는데, B화면에서 라이트 모드로 바뀌면 사용자 경험에 너무 별로겠죠?

2.3 쇼핑 카트 관리

이커머스 애플리케이션에서 사용자가 장바구니에 담은 상품 목록은 앱의 여러 부분에서 접근되어야 합니다. 상품 상세 페이지에서 '장바구니 담기'를 하면, 헤더의 장바구니 아이콘에 개수가 표시되고, 결제 페이지에서도 이 정보를 활용해야 하죠. 쇼핑 카트 데이터를 전역 상태로 관리하면, 어떤 컴포넌트에서든 장바구니에 상품을 추가하거나 삭제하고, 전체 수량을 확인할 수 있어 매우 편리하겠죠?

2.4 알림 및 메시지 관리

사용자에게 보여지는 토스트 메시지, 팝업 알림, 에러 메시지 등은 앱의 다양한 액션에 의해 발생할 수 있습니다. 이 알림들을 전역 상태로 관리하면, 어떤 컴포넌트에서든 알림을 발생시키고, 앱의 특정 영역에서 중앙 집중적으로 알림을 표시할 수 있습니다. 덕분에 알림 로직을 여러 곳에 중복해서 작성할 필요 없이 깔끔하게 처리할 수 있습니다.

2.5 멀티 스탭 폼 데이터

회원가입이나 주문하기처럼 여러 단계를 거쳐 사용자 입력을 받는 멀티 스탭 폼의 경우, 각 단계에서 입력된 데이터를 다음 단계로 넘겨야 합니다. 이럴 때 각 단계의 데이터를 전역 상태로 관리하면, 모든 단계의 데이터를 한 곳에서 모아 최종 제출 시 한 번에 처리할 수 있습니다. 중간에 사용자가 이전 단계로 돌아가더라도 입력된 데이터가 유지되므로 사용자 경험 또한 향상되겠죠?

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

하지만 전역 상태 관리를 직접 구현하고 관리하기가 어렵기 때문에 주로 라이브러리를 사용하곤 하는데요. 대표적인 라이브러리로는 Redux, MobX, Context API, Recoil, Zustand, Jotai, Valtio 등이 있습니다. 앞으로의 글들에서는 라이브러리를 하나씩 살펴보도록 하겠습니다.

이상입니다.

읽어주셔서 감사합니다.