React의 상태관리방법

리액트의 상태관리방법은 크게 2가지로 나뉩니다. 부모 혹은 자신이 직접 컴포넌트 안에서 관리하는 로컬 상태 방법과 로컬 상태의 불편함을 개선한 전역 상태 관리 방법이 있습니다.

로컬 상태 (Local State)

특정 컴포넌트 내에서만 데이터를 관리하는 것으로, 함수형 컴포넌트에서는 리액트 hook 과 props 를 사용하여 상태관리를 하는 방법이다. 하위 컴포넌트에 데이터를 전달하기 위해, props를 사용하는 데 어플리케이션의 크기가 점점 커질 수록 props drilling이 증가하여, 반복작업이 많아지고 유지 보수가 어려워지는 단점이 있다.

전역 상태 (Global State)

전역 상태는 프로젝트 전체의 상태관리를 총괄하는 방법으로, 대표적으로 Redux, Context API 등이 존재한다. 전역에서 관리하기 때문에, 어떤 컴포넌트에서든 상태 값을 반영하고, 변경시키는 것이 가능하다. props 과정이 생략되어, 작업이 적고 유지 보수가 간편해지는 장점이 있으나, 상태관리 오류시 나타나는 사이드 이펙트가 커지는 단점이 존재한다.

Redux

Redux는 React에서 가장 많이 사용되는 상태관리 라이브러리이다. 원래 자바스크립트 관련 앱의 상태관리를 위해 사용되다가, React 가 등장하며 react-redux 라는 이름을 가지고 react에서 redux를 사용하도록 모듈이 등장하며, 주목을 받게 되었다.

Redux의 장점

• 리액트 뿐만 아니라 다른 프레임워크에서도 사용할 수 있다.
• 성능적인 면에서 Context API 보다 좋다는 사례가 많다.
• 커뮤니티가 매우 크며, 제공되는 익스텐션이나 툴이 많다.
• 미들웨어를 추가적으로 구성할 수 있다.

Redux의 단점

• 다양한 미들웨어를 제공하는 만큼 러닝커브가 긴 편이다.
• react-toolkit 을 통해 좀 더 간편하게 작성할 수 있으나, 다른 상태관리 라이브러리 대비 여전히 작업량이 많다

MobX

MobX는 Redux와 같은 전역상태관리 라이브러리이면서, React에 비종속적인 라이브러리이다. 객체 지향의 느낌이 강하며, Spring Framework와 유사한 아키텍쳐 구조를 가지고 있어 서버 개발자에게 친숙하다는 평가를 받고 있다.

MobX 장점

• Redux 대비 비교적 낮은 러닝커브를 가지고 있다.
• 다수의 store를 구성할 수 있다.

MobX 단점

• devTools, 커뮤니티가 다소 부족하다.

Context API

Context API는 React v16.3 이후로 추가된 기능으로, Redux와 같이 전역 상태 관리를 위한 기능을 제공한다. 좀 더 정확히 말하자면, 전역상태관리를 하기 보다는 기존 로컬 상태를 종속성 주입 형태로 변환하여 이벤트 버스를 통해, props drilling을 회피하기 위한 용도로 사용된다. 보통 Context API 를 useState 및 useReducer를 함께 사용하는 편이다. Context API 는 컴포넌트가 상태관리를 공유할 수 있도록 트래킹을 도와주고, 실제 상태변경은 useState 및 useReducer 등의 hook 이 진행한다.

Context API 장점

• 따로 설치가 필요없다.
• 원하는 Provider를 특정 컴포넌트에만 추가하는 것이 가능하다. 추가한 컴포넌트 내에서만 해당 프로바이더에 접근하도록 하는 것이 가능하다.
• 비교적 낮은 규모의 어플리케이션 상태관리에는 좋다.

Context API 단점

• useState 및 useReducer와 함께 사용할 경우, 성능 이슈가 발생할 수 있다.
• provider 에 속한 컴포넌트의 경우 리렌더링이 발생한다.
• useMemo, React.momo 를 활용하여 메모이제이션을 통해 리렌더링을 줄일 수 있으나, 작업량이 많아지며 이러한 작업 없이 대체할 수 있는 라이브러리들이 많다.

Recoil

Recoil은 Facebook에서 개발한 React 상태 관리 라이브러리이다. Redux와 유사한 전역 상태 관리 방법을 제공하면서도, Context API와는 달리 상태 변경 시 컴포넌트를 리렌더링하지 않고 필요한 부분만 업데이트한다. 작업량이 Redux, Context API 대비 상대적으로 적으며, 기존의 useState 와 유사하게 사용되기 때문에 개발자가 금방 적응할 수 있다는 것이 장점이다.

Recoil 장점

• Redux 대비 store 구성을 위한 코드가 간편하다.
• 이미 hook을 사용해본 경험이 있는 개발자라면 익숙하게 사용할 수 있다.
• 공식적으로 typescript를 지원한다.

Recoil 단점

• 다른 상태관리 라이브러리보다 등장 시기가 늦어 실제 반영하여 사용하는 회사들이 많지 않다.
• 다른 라이브러리와의 호환성 문제가 나타날 수 있다는 리스크를 가지고 있다.

최종

대규모 서비스를 진행하던지 혹은 특수한 상황을 제외한다면, 어떠한 상태관리 방법을 사용하든 개발자가 원하는 동일한 전역상태관리 효과를 나타낼 것이다. 꼭 무엇을 써야만 한다기 보다는, 전역상태관리 라이브러리가 각자 이러한 특징들을 가지고 있고 현재 진행하는 서비스의 모든 상황을 고려했을 때 가장 적절한 라이브러리를 선택하여 사용하는 것이 중요하다.