[React] Zustand

지난 Recoil에 이어 React의 전역 상태 관리 도구 중 하나인 Zustand에 대해서 알아보자.

 

https://memo-code.tistory.com/68

[React] Recoil

 

 

Zustand?

 

Zustand는 전역 상태 관리를 돕는 React의 라이브러리이다.

Zustand는 낮은 러닝커브를 가지고 있기에 간단하게 이해와 적용이 가능하고, 가볍다는 장점이 있기 때문에 선택된다.

Zustand는 React 기본 패키지에 내장되어 있지 않으므로 별도의 설치를 해주어야 한다.

npm install zustand

yarn add zustand

 

 

Store?

 

Zustand에서 store는 전역 상태를 정의하고 관리하는 공간이다. create 함수를 이용해 상태와 상태를 업데이트하는 메서드를 정의하고, 이 store를 사용하는 컴포넌트에서는 use~~Store와 같은 형태로 가져와 사용할 수 있다.

Zustand의 스토어는 다음과 같이 생성하고 사용할 수 있다.

 

create 함수로 스토어 생성 기본 형태

 

import { create } from 'zustand';

export const useStateStore = create<{
  currentPage: number,
  setCurrentPage: () => void
}>((set, get) => ({
  currentPage: 1,
  setCurrentPage: (page) => {
    const { currentPage } = get();
    set({ currentPage: page });
  }
}));

 

 

 

get함수를 사용하지 않고, set함수의 콜백을 이용하여 상태 업데이트

 

import { create } from 'zustand';

export const useStateStore = create<{
  currentPage: number,
  setCurrentPage: (page: number) => void
}>((set) => {
  currentPage: 1,
  setCurrentPage: (page: number) => set(() => ({ currentPage: page })
}));

 

 

state 초기화 방법

 

import { create } from 'zustand';

export const useStateStore = create<{
  currentPage: number,
  setCurrentPage: (page: number) => void,
  resetState: () => void
}>((set) => {
  currentPage: 1,
  setCurrentPage: (page: number) => set(() => ({ currentPage: page })),
  resetState: () => set(() => ({ currentPage: 1 })),  // 혹은 초기화 값 사전 선언
}));

 

 

생성한 스토어의 사용

 

import { useStateStore } from './store/useStateStore'

function App() {
  const currentPage = useStateStore(state => state.currentPage);
  const setCurrentPage = useStateStore(state => state.setCurrentPage);

  ...
  
  return (
    ...
  )
};