팀 프로젝트를 진행하면서 상태관리 라이브러리를 어떤 것을 써야할지 고민하는 중이다.

Recoil

자주 사용하던 Recoil은 전역상태 관리 라이브러리로 손쉽게 상태들을 전역으로 관리하면서 서로 연관 없는(부모 자식 간이 아닌) 컴포넌트에서 여기저기 쉽게 상태를 가져와 사용하고, 또 변경할 수 있다.

이러한 상태변경에 따라 각각의 atom(상태)를 구독하고 있는 컴포넌트들은 그에 맞게 새롭게 렌더링된다.

진행하는 프로젝트에서 어떤 상태관리 라이브러리를 사용해야 더 효율적으로 상태를 관리할 수 있을까?

현재 진행하는 프로젝트는 기본적으로 서버와 HTTP요청 및 응답이 많다.

사용자의 입력 혹은 조작에 따라 생성, 수정, 삭제 등 많은 부분이 요청과 응답으로 이루어진다.

주기적으로 데이터를 받고, 캐싱 값을 사용하여 불필요한 서버 요청을 줄여야한다.

recoil 또한 selector를 이용해 캐시값을 사용할 수 있다.

하지만 자주 변경되어 업데이트가 필요한 값이라면 selector 내에서 비동기요청을 할 경우, 캐싱 값을 쓰지 않고 새로 업데이트하기 위해서는 내부에 불필요한 트리거를 만들어야한다.

또, 상태를 변경한 이후에는 trigger의 값을 바꾸어주며 selector 내부에서 새로운 key 값으로 인식하도록 해주어야한다.

React-Query

아직 잘 모르는 상태 관리 라이브러리지만 이름은 많이 들어봤다.

React-Query는 서버상태를 손쉽게 관리할 수 있는 상태관리 라이브러리이다.

기본적으로 서버의 상태를 전역에서 관리하며 중복되는 요청을 방지하고 캐싱 값을 사용한다.

또, 여러군데에서 사용하는 값들을 주기적인 업데이트를 통해 데이터를 새로고침해준다.

여기서 고민되는 것은 상태관리 라이브러리가 프로젝트에 2개나 있어야 할까?

서버상태를 관리하는 react-query를 사용한다면 dark-mode 혹은 로컬에서 관리하게 되는 스타일과 관련된 상태 혹은 서버와 연관이 없는 상태들은 어떻게 관리를 해주어야할까?

리액트의 context API를 통해 관리 할 수도 있게지만, 만약 depth가 깊어 진다면? 불필요한 리렌더링이 마구 발생하지는 않을까?

로컬에서 관리하는 상태는 recoil을 통해 관리?

서버와 요청 응답하는 데이터라면 react-query?

아직 정답은 얻지 못했지만 프로젝트를 진행하면서 react-query의 이점을 활용해볼 생각이다.

그러면서 전역으로 관리해야하는 로컬 상태가 필요하다면 그때가서 recoil을 적용해봐야겠다.