[React] 어떤 상태관리 라이브러리를 써야할까?(Redux, Mobx, SWR, React Query)

sujin·2023년 2월 25일

목록 보기

16/17

상태관리 라이브러리 찍먹하기

요즘 개인적으로 사이드 프로젝트하면서 강의를 듣고 있는 중인데 SWR이라는 상태관리 라이브러리를 새롭게 알게되었다. 그 전에 공부했던 상태관리 라이브러리는 Redux 가 있었고 인턴을 할때는Mobx를 써봤고 현재 재직중인 회사에서는 React Query를 쓰고 있다. 이 와중에 또 새롭게 알게된 SWR까지...

의도치 않게 여러 상태관리 라이브러리를 조금씩 써보게 됐는데 쓰면 쓸수록 혼란스러움도 같이 커지는 기분이었달까ㅎㅎ (이전에 사용했던 상태관리 라이브러리에 익숙해지지 않은 상태에서 또 새로운것을 쓰게 되다 보니 그랬던 것 같다.) 그래서 이번 기회에 상태관리 라이브러리들의 특징과 차이점들에 대해서 정리하고 프로젝트 조건에 맞는 BEST 상태 관리 라이브러리를 쓰려고 한다.

💡 상태관리를 해야하는 이유

상태관리 라이브러리에 대해서 알아보기 전에 상태관리를 왜 해야할까?!

먼저, 리액트는 단방향 바인딩으로 부모 컴포넌트에서 자식컴포넌트로만 state를 props로 전달 할 수 있다. 여기서 프로젝트의 규모가 커지고 컴포넌트가 많아지면 state를 자식의 자식의 자식의 자식의 자식… 이런식으로 전달하게 되고 상태관리가 복잡해지게 된다.

예를 들어 A > B > C > D 와같은 관계의 컴포넌트가 있다고 가정했을 때 D컴포넌트가 A컴포넌트의 state를 필요하다면 그 사이의 모든 컴포넌트(B,C)에 해당 state를 전달해줘야한다.
이렇게 props 를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정을 props Drilling 이라고 한다.

따라서, 이런 문제를 해결하기 위해 등장한 것이 상태관리 라이브러리이고 상태관리를 통해 state를 전역 변수처럼 만들어 어떤 컴포넌트에서든 바로 접근 가능하도록 하는 것이다!

Redux

Redux는 리액트를 개발함에 있어 일종의 표준 상태관리 라이브러리로 여겨진다. 그래서 나 또한 React를 공부하면서 Redux를 공부했었다. 대부분의 React 애플리케이션 개발 환경 설정 시 자연스럽게 Redux가 마치 React 스택의 일부 인 것처럼 구성되어 있기도 하다.

✅ 특징

데이터가 단방향으로 흐르는 구조
action reducer selector store 를 세팅하는 보일러플레이트 코드가 존재함
store 에 모든 상태를 저장하는 중앙 집중 방식 (store 는 외부 요소이기 때문에 리액트 내부에 접근이 불가능함)
store 내부 상태는 action 객체에 의해서만 변경이 가능함
따라서, 모든 state 변화들이 하나의 store에만 집중되어 있고 단방향으로 일어나기 때문에 예측 가능한 결과가 나타남

❓보일러플레이트 코드
최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다.

👍🏻 장점

컴포넌트의 라이프사이클과 관계없이 전역 상태에서 비동기 데이터가 관리되기 때문에 캐싱과 같은 최적화 작업을 쉽게 수행이 가능하고 복잡한 사용자 시나리오에 대한 대응도 가능함
오직 하나의 store 만 가지기 때문에 (객체 트리가 하나) 디버깅에 용이하다.

👎🏻 단점

장황한 보일러플레이트 코드가 요구됨

Mobx

✅ 특징

여러개의 store 를 둘 수 있으며, 여러개의 스토어를 관리하기 위한 루트 스토어를 만들어 이용
store 의 데이터를 action 발행 없이 업데이트 할 수 있음
랜더링 대상이 되는 state 를 관찰 대상(observable value)라고 칭하며 @observable 데코레이터로 지정한 state는 관찰대상으로 지정되고 그 state 값이 변경 될 때마다 리랜더링 됨
객체지향적으로 Class를 사용함 (Class 문법 사용)