[SSAFYcial] Zustand에 대해 알아보자

 

안녕하신가요?

 

어느덧 싸피도 2학기에 접어들어 프로젝트를 시작하게 되었습니다.

반 내 조사 결과, 많은 팀들이 React를 이용하여 프론트를 구성하고 있는 것으로 확인되었는데요

오늘은 React에서 자주 사용하는 상태관리 라이브러리인 Zustand의 대락적인 사용법에 대하여 익혀보고자합니다.

 

 

zustand란 상태 관리 라이브러리중 하나로,

일반적으로 사용되는 contextAPI나 jotai와는 다르게

Provider를 사용하지 않고 저장된 값을 불러올 수 있게 되어 있습니다.

 

개인적으로는 1학기에 배웠던 Vue의 pinia와 비슷해서 사용하기 편하다는 인상을 받았습니다.

 

기본적인 사용법은 위와 같은데요,

먼저 create 함수를 통하여 store를 작성 후, 컴포넌트 내에서 import하여 사용하는 방식입니다.

위 코드의 경우 typescript를 사용하였으므로 interface를 함께 작성해주었습니다.

 

 

두 번째로 알아볼 것은 store 내부의 state를 참조하는 방법입니다.

두 가지 방법이 있는데요, 바로 get()과 store.getState()입니다.

getState의 경우 store 밖에서도 사용 가능하며, reactive 하지 않은 방식으로 store의 값을 참조할 수 있습니다.

 

또한, get과 set의 경우 middleware를 통해 수정하는 것이 가능한데, 

해당 변동 사항은 setState 및 getState에는 반영되지 않는다는 점! 알아 두시길 바랍니다.

 

 

세 번째로 알아볼 것은 store의 값을 스토리지에 저장하는 방법입니다.

 

기존에 작성해 놓은 store의 내용물을 persist로 감싸주기만 하면 끝나는데요,

기본 경로는 localStorage로 지정되어 있으며, session에 값을 저장하고 싶을 경우

위 캡쳐와 같이 storage의 경로를 수정해주시면 됩니다.

 

-

 

단, store 사용 시 주의해야 할 사항이 한 가지 있는데요!

 

const { bears, increasePopulation } = useStore(); 

 

위와 같은 방법으로 변수를 import 할 경우, store 내부의 모든 상태를 반환하기 때문에

해당 store의 state를 포함하고있는 모든 요소들이 불필요하게 리렌더링되게됩니다.

그렇다면 어떻게 불러와야 할까요?

 

zustand 공식 문서입니다.

zustand는 변화를 엄격하게 감지하고 있으므로,

여러 개의 state를 사용할 경우 useShallow()를 이용하여 얕은 복사를 하는 것으로

불필요한 리렌더링을 막을 수 있다고 합니다.

 

즉, 위 코드는 아래와 같이 수정하여 사용할 수 있습니다.

 

 

이상, zustand의 사용법에 대하여 간략하게 알아보았습니다!

자세한 내용은 공식 문서를 참고하세요.

https://github.com/pmndrs/zustand

 

감사합니다.