리액트 상태관리, 어떻게 하고 계신가요?

Question

안녕하세요, 주니어 프론트엔드 개발자입니다.

현재 저는 어드민 프로젝트를 리액트로 만드는 작업을 하고 있습니다. 프로젝트 규모가 꽤 크다보니, 상태관리에 대해 많은 고민을 하고 있어요. 그 동안 내가 알던 리액트가 맞나 싶을 정도로 상태에 대해 다시 생각해보고 있습니다.

처음에는 상태관리 라이브러리 없이 작업을 했습니다. 나름대로 기획서를 보고 상태를 저마다의 컴포넌트에 넣어 사용했어요. 그런데 진행하다보니 다른 곳에서도 해당 상태를 사용해야하는 일이 빈번하게 발생해서, 수정하는 시간이 길어질 때가 많았습니다.

그래서 결국 전역 상태관리 라이브러리(zustand)를 사용하게 됐어요. 막상 사용해보니 정말 좋았습니다. 제가 생각한 장점은 다음과 같아요.

- 사용할 컴포넌트에서 바로 사용이 가능하다.
  - 스토어에서 뽑아 사용하다보니 데이터 동기화가 비교적 쉬웠어요.
- 스토어별로 파일을 분리하고, 해당 로직만 담겨 있어 파악하기가 쉽다.
  - 며칠 뒤에 봐도 이어서 작업하기가 좋았습니다.
  - 이전에는 상태들이 어느 컴포넌트에서 쓰이는지 헷갈릴 때가 많았어요.
  - 컴포넌트는 뷰 컴포넌트로, 비즈니스 로직이 스토어에 담겨 있어서 좋았어요.

제 짧은 경험에 느낀 장점들로 계속 사용하고는 있지만 자꾸 의문이 듭니다. 거의 모든 상태들을 스토어에 담아 사용하다보니 전역 라이브러리의 역할에 맞지 않다고 생각이 들어요. 페이지 간에 공유하는 상태는 없다보니 context api도 고려해봤지만, zustand와 달리 하위 컴포넌트가 리렌더링이 되고, 해당 api는 다크 모드같은 기능에 쓰고, 러닝커브가 비교적 적은 zustand를 선택했습니다.

결론은, 여러분은 상태관리를 어떻게 하고 계신지 궁금합니다. 어떠한 기준이 있는지, 전역 상태관리 라이브러리는 어떤 경우에 쓰는지 등 제가 경험이 적고 혼자 프론트 개발을 하다보니 모든 의견 하나하나가 소중합니다. 리액트 상태관리에 대한 선생님들의 고견을 부탁드립니다.

손정현 · Accepted Answer

안녕하세요!

상태관리는 개발팀마다 방식이 다를 것 같아요. zustand 외에도 많이 보던 것들은 redux, recoil, tanstack-query (react-query) 등이 있는 것 같아요.

다른 곳은 어떻게 관리하는지 잘 모르지만, 저희는 UI에서 필요한 상태와 서버에서 받아오는 상태를 따로 취급하자는 컨벤션을 따르고 있어요. 사용하는 상태관리자는 recoil, tanstack-query를 주로 사용하고 있습니다.

이 페이지를 기준으로 말씀드리자면, 질문 내용, 답변 내용, 댓글 내용 등이 서버 상태에 포함되며 만약 질문, 답변, 댓글이 수정되면 다시 서버로 데이터를 요청해서 필요한 부분을 다시 그려주는 방식을 취하고 있어요.

UI에 필요한 상태도 모두 다 전역 스토어에 넣지는 않고 필요한 경우에만 넣고 있습니다. 전역 스토어에 필요한 경우 기준은 딱히 정해놓지는 않았지만 저는 부모-자식 컴포넌트 간 depth가 너무 깊어지거나, 여러 페이지에서 필요한 상태인 경우 전역 스토어 넣고 있습니다. 그외에는 컴포넌트 내에서 로컬하게 상태를 관리하고 있어요.

참고하시면 좋은 글들 첨부할게요 :)
- https://www.stevy.dev/react-state-management-guide/
- https://mingule.tistory.com/74
- https://frontendmastery.com/posts/the-new-wave-of-react-state-management/