2. FrontEnd/State Management

[Zustand] 사용방법

1. 설치하기npm i zustandyarn add zustand2. store 만들기import create from 'zustand';import { TUser } from '../../types/auth';interface UserState { user: TUser | null; setUser: (user: TUser | null) => void;}const useUserStore = create((set) => ({ user: null, setUser: (user) => set({ user })}));export default useUserStore;위와같이 Zustand의 store를 만드는 코드는 간단하다Provider로 감쌀필요도 없이 state 와 action을 한 객체 안에서 같이..

2024. 6. 13. 14:05

2. FrontEnd/State Management

[Zustand] 사용법

1. 설치 # NPM npm install zustand # Yarn yarn add zustand 2. store만들기 나의 경우는 src폴더 안에 store폴더를 만들어 store.ts types.ts를 만들어서 상태관리를 주석처리로 구분하여 모아놨다. import { create } from 'zustand' const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) store는 hook이다. store에 primitives, objects, functions을 넣을 수..

2023. 11. 15. 11:41

2. FrontEnd/State Management

[Zustand] 기존 라이브러리 간 비교

Zustand는 React의 많은 상태 관리 라이브러리 중 하나이다. 각 라이브러리마다 장점과 단점이 있는데, 각 라이브러리 간의 주요 차이점과 유사점을 비교하여 Redux, Valtio, Jotai, Recoil 등의 일부 라이브러리와 비교하여 Zustand에 대해 설명한다. Zustand vs Redux 개념적으로, Zustand와 Redux는 매우 유사하며, 둘 다 불변 상태 모델에 기반을 두고 있다. 그러나 Redux는 당신의 앱이 context providers 에 래핑되어야 하며, Zustand는 providers로 감싸주지 않아도 사용이 가능 앱 내 렌더 최적화에 관해서는 Zustand와 Redux의 접근 방식에 큰 차이가 없습니다. 두 라이브러리 모두 selectors를 사용하여 렌더 최적..

2023. 11. 15. 11:36

2. FrontEnd/State Management

[Recoil] 새로고침(refresh) 하면, state가 날아가는 현상

문제 : Recoil을 사용하면서 새로고침시 기존 정보가 초기화 되는 부분을 보완해야한다. 해결 : 새로고침해도 데이터를 유지하기 위해서 recoil-persist 라이브러리를 사용 npm : https://www.npmjs.com/package/recoil-persist recoil-persist Package for recoil to persist and rehydrate store. Latest version: 5.1.0, last published: 4 months ago. Start using recoil-persist in your project by running `npm i recoil-persist`. There are 7 other projects in the npm registry u..

2023. 11. 8. 11:47