상태 관리 라이브러리 vanilla-store 소개

리액트에서의 상태 관리는 점점 복잡해지는 앱 환경에서 중요한 요소입니다. 다양한 상태 관리 라이브러리들이 존재하지만, 팀에서는 mobx를 사용해왔습니다. 그러나 서비스가 복잡해지면서 불필요한 의존성을 줄이기 위해 react-api를 활용한 대체 작업을 진행했습니다. 그 과정에서 mobx의 부재로 인해 상태 관리 라이브러리의 필요성을 느끼게 되었고, 간단한 상태 관리 라이브러리인 vanilla-store를 개발하게 되었습니다.

vanilla-store의 내부 구현

vanilla-store는 createVanillaStore와 useStore라는 두 가지 주요 함수로 구성됩니다. createVanillaStore는 초기 상태값과 선택적 persist 옵션을 받아 상태를 관리하는 기능을 제공합니다. useStore 훅은 vanilla-store 객체를 통해 상태에 접근하고 변경할 수 있게 해줍니다. 이를 통해 상태 관리의 보일러 플레이트 코드를 줄이고, 보다 간결하게 상태를 관리할 수 있습니다.

useStoreSelector 훅

vanilla-store는 또한 useStoreSelector 훅을 제공하여 특정 상태 필드만을 관찰하도록 해, 불필요한 리렌더링을 방지합니다. selector를 통해 관찰할 필드를 선택하고, 상태 변화에 따라 필요한 경우에만 리렌더링이 발생하도록 설계되었습니다.