react에서 state를 잘 관리하는 방법 질문 드립니다

Question

안녕하세요 왕킹왕짱짱초보 프론트 개발자입니다

현재 react와 recoil을 사용하여 프로젝트를 개발중입니다
구조는 간단하게 도메인별로 
(ex pages 디렉토리 하위
       login 디렉토리 하위 
       action, model, component
이런식으로 구조를 잡아뒀습니다 다른 도메인들도 똑같이 잡아서 사용하고있습니다

서론은 
저는 recoil을 그저 로그인 데이터나 다국어 정보등
localstorage와 연관된 정보나 말 그대로 프로젝트 전체 범위에 영향을 끼치는 상태들만 관리하는 용도로 사용하고있습니다 그런데 프로젝트를 진행하다보니 각 도메인별로
컴포넌트 개수가 많아지고 특히 Modal을 사용하거나
api호출 시 isLoading과 같은 상탯값을 다룰때
이게 상태가 많아지고 넘기는 값이 많아지니까 제가 만든
코드를 제가 구분하기 힘든 지경에 이르러버렸습니다...

본론은
도메인별로 api, model, compnent를 관리할때
recoil이나 redux같은 전역 상태도 각 domain별로 atoms 디렉토리나 store 디렉토리로 관리해도 괜찮을까요??
전역 상태 관리 남용이나 오용은 아닌지 걱정도 되고..
잘 몰라서 해도 되는지 확신이 안 서네요..

🙇

손정현 · Accepted Answer

안녕하세요!

react에서 상태 관리를 하는 방법은 여러가지 방법이 있는것 같아요. 우선 제가 이해한바로는 전역 상태 관리 툴을 사용할때 여러개의 도메인으로 atom/store를 생성해도 되는지가 질문인 것 같은데 맞나요?

맞다면 사용하시는 상태관리 툴마다 조금씩 다를 것 같습니다. redux의 경우는 단일 스토어로 상태를 관리하고 reducer를 작은 단위로 분리시키는 방법이 일반적인것 같아요. recoil의 경우는 도메인 별로 여러개의 atom을 만드는 방식을 선호하는 것 같습니다. 코드 관리를 위해 도메인 별로 상태들을 격리 시키는 것은 좋지만 사용하시는 상태관리 툴이 권장하는 방식을 사용해보시길 추천드립니다.

별개로 api 호출을 통한 isLoading과 같은 상태들을 관리해주는 툴도 존재합니다. tanstack/query (예전 react-query)와 SWR 같은 라이브러리들을 확인해보세요 :)
- https://github.com/facebookexperimental/Recoil/issues/480
- https://redux.js.org/faq/store-setup#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself
- https://tanstack.com/query/latest
- https://swr.vercel.app/ko

kevin · Answer

리코일이나 리덕스는 정말 필요한상황에서만 쓰는것을 추천드립니다 공통적인부분이 몸집이 커질다보면 물론 정리를 잘한다고해두 혼란스럽기 마련인것같습니다 
서버에서 가져온 데이터들의 관리를 일관성있게 한다고 무조껀 다때려박기도 하는데 제발 멈처ㅓㅓㅓㅓ