[React] zustand

[DrMaemi]

Installation

$ yarn add zustand                                                                                                       월  5/20 17:36:05 2024
yarn add v1.22.22
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ zustand@4.5.2
info All dependencies
├─ use-sync-external-store@1.2.0
└─ zustand@4.5.2
✨  Done in 2.82s.

subscribeWithSelector

• store 를 생성할 때 실시간으로 변화를 감지해 반영하고 싶다면 subscribeWithSelector 로 생성해서 사용할 수 있다.
• 실시간 변화 감지 반영을 하고싶지 않으면 getState(), setState() 를 사용하면 되는 듯하다.\

persist on refresh

• https://docs.pmnd.rs/zustand/integrations/persisting-store-data
• 원래 새로고침 시 데이터가 날아가는게 맞는 듯하다. 서버 쪽 DB에 persist 해두지 않는 한. 그러나 History 상 데이터는 보존된다.

A. 참조

• https://www.npmjs.com/package/zustand
• https://github.com/pmndrs/zustand?tab=readme-ov-file
• https://github.com/pmndrs/zustand?tab=readme-ov-file#typescript-usage
• https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md
• https://zustand-demo.pmnd.rs/