[Library] Zustand

무엇에 쓰는 물건인고?

전역상태관리 Library

전역상태관리란 ?

• 리액트는 여러 component들을 조합하여 하나의 HTML을 구성하는데, 하나의 state를 다른 component와 공유하려면 props 과정을 거쳐야한다.
• 이 때 props는 상위 component에서 하위 component로 단방향성으로만 이동할 수 있고, 한 번에 하나의 component만 이동할 수 있다.
• state는 component에 할당 된 메모리; 즉 데이터라고 볼 수 있다.
• 최상위 component의 State를 3중중첩된 하위 component에 전달하려면 3번의 Props를 거쳐야 하고 이것이 더욱 복잡해지면 매우 비효율적인 문제가 발생하는데 이를 propsdrilling 이라고 한다.
• 전역상태관리는 이러한 현상을 방지하고 많은 comnponent에 공유되는 state를 효율적으로 관리하기 위해 중앙 store에 state를 할당하고 이를 원하는 component에서 import 하여 바로바로 사용할 수 있게 해준다.
• props drilling 현상 방지 + state 한 눈에 보며 추적 및 유지/보수에 편리함

전역상태관리 라이브러리의 할아버지: Redux

• Redux는 가장 먼저 그리고 널리 알려진 상태관리 라이브러리 중 하나이다.
• 동기/비동기 처리에 취약하고 보일러플레이트가 많은 치명적인 단점이 있어 최근에는 이러한 약점들을 보완한 전역상태관리 라이브러리들이 트랜드이다.
• Store에 state와 action을 생성하고 원하는 component에 import 하여 사용한다.
• action이란 state의 동작이다.
• action을 생성할 때에는 reducer를 사용해야 한다.
• import 할 때에는 provider와 dispatch를 사용해야 한다.

Zustand의 장점

• 다른 상태관리라이브러리 보다 훨씬 가볍다 !
• 보일러플레이트로부터 자유로워질 수 있다.
• store에 state와 action만 생성하고, 원하는 component에 import하여 바로 사용가능 ! (reducer, provider, dispatch등 불필요)
• npm download 순위가 가장 높기에 각종 커뮤니티에 여러 정보들이 많다.

한계

• 대규모 프로젝트에서 도입하기에는 어려움이 있다.
• 23년 우아콘테스트에 따르면 우아한형제들에서 clientStore는 Zustand로 serverStore는 react-query를 사용하여 상태관리를 함으로 이러한 한계 를 극복했다고 한다.

Refe: https://docs.pmnd.rs/zustand/getting-started/introduction, https://www.youtube.com/watch?v=QZcYz2NrDIs, https://www.youtube.com/watch?v=nkXIpGjVxWU