Recoil을 더 이상 사용하지 않기로 한 이유
상태관리 라이브러리인 recoil을 잘 쓰다가 recoil이 지원을 중단한다는 아티클과 깃헙에 쌓인 미해결 issue를 보고 상태관리 라이브러리를 다시 선택해야 한다는 기로에 섰다.
먼저 상태관리가 낯선 사람을 위해 용어 정리를 하자면 상태관리란 전역적으로 사용되어야 하는 변수들을 전역적으로 관리하기 위한 방법이다.
상태관리를 사용하지 않는다면 Prop Drilling과 같은 리랜더링을 유발시키는 작업들을 진행해야 한다.
이를 위해 대체적으로 redux, recoil, zustand를 사용한다.
기존의 프로젝트에서는 recoil을 사용하는데 recoil을 채택한 이유는 다음과 같다.
먼저 recoil은 매우 react스러운 코드로 작성되며 유지보수를 하기도 수월하다.
또한 러닝커브는 짧으며 사용시에 개발자 친화적이다.
하지만 여러 아티클을 접하며 더 이상 Meta에서 Recoil을 지원하지 않는 것을 확인 했으며
아직 recoil에서 오류를 경험해보지는 못했지만 다른 라이브러리를 채택하기로 했다.
redux를 사용할까 하다가 최근 급부상 중인 zustand를 채택하였다.
Zustand 사용법
npm i zustand를 통해 zustnad를 설치한다.
src- store폴더를 생성한다.
그곳에 useModalStore.ts와 같이 store를 관리할 수 있는 파일을 생성한다.
useModalStore.ts
위의 코드에서 하는 역활은 다음과 같다.
isModalOpen으로 모달 활성 유무를 저장한다.
setModalState에서 함수의 매개변수로 들어온 boolean값을 통해 isModalOpen을 변경할 수 있게 한다.
modalName은 모달이 활성되고 어떤 모달을 띄울지 결정하기 위한 이름 세팅이다.
setModalName을 통해 name을 string으로 받아오고 modalName을 지정해준다.
useSetModal.ts
해당 코드는 커스텀 훅을 통해 모달을 띄움과 동시에 이름을 세팅하는 file이다.
useModalStore()을 호출하고 {}에 사용할 값을 담아 사용해준다.
recoil과 거의 유사한 형태로 작동한다.
따라서 recoil에서 마이그레이션 할때에도 매우 간편하게 사용할 수 있다.
zustand를 사용하기 이전의 라이브러리인 recoil에서 워낙 좋은 추상화를 지닌 코드를 사용할 수 있게 해줬기 때문에 zustand는 다소 러닝커브가 존재할것이라고 생각하였지만 그렇지 않는것을 확인할 수 있다.
