[React] zustand 를 사용해서 상태관리 하기

zustand

 
Zustand는 React 애플리케이션에서 간단하고 가볍게 상태를 관리할 수 있는 상태 관리 라이브러리입니다. 독일어로 "상태"를 뜻하는 Zustand는 Redux와 같은 전통적인 상태 관리 라이브러리보다 훨씬 더 직관적이고 코드가 간결해 많은 개발자들이 선호합니다.

 
 

zustand 설치 명령어

npm i zustand

 
 

스토어 생성

리액트에서 스토어를 생성하여 입력받은 값을 스토어에 저장합니다. 
이렇게 하면 컴포넌트가 다시 렌더링 되어도 스토어에 저장된 데이터로 상태를 유지할 수 있습니다.
 

import { create } from "zustand";
import { persist } from "zustand/middleware";

const useStore = create(
  persist(
    (set) => ({
      user: null,
      setUser: (text: any) => set(() => ({ user: text })),
      removeUser: () => set({ user: null }),
    }),
    { name: "user-storage" }
  )
);

export default useStore;

 

• - Zustand의 create 함수와 persist 미들웨어를 임포트하여 상태를 생성하고 지속하도록 합니다.
• useStore라는 상태를 생성합니다.
• create 함수 안에 persist를 적용하여 상태가 로컬 스토리지에 저장되도록 설정했습니다.
• user: 현재 사용자 정보를 저장하는 상태입니다. 초기값은 null입니다.
• setUser: text 매개변수를 받아 user 상태를 업데이트합니다. set 함수를 통해 user 상태를 text 값으로 변경합니다.
• removeUser: user 상태를 다시 null로 설정하여 사용자 정보를 초기화합니다.
• persist 미들웨어의 설정으로, name을 "user-storage"로 지정하여 로컬 스토리지에 "user-storage"라는 키로 상태를 저장합니다.

코드 동작

• useStore를 사용하는 컴포넌트에서는 user 상태와 setUser, removeUser 함수를 통해 사용자 정보를 관리할 수 있습니다.
• setUser로 user 값을 설정하면 자동으로 로컬 스토리지에 저장되며, 새로고침 후에도 데이터가 유지됩니다.
• removeUser를 호출하면 user 상태가 null로 초기화되고, 로컬 스토리지의 값도 업데이트됩니다.

호출 방법

const user = useStore((state: any) => state.user);
const setUser = useStore((state: any) => state.setUser);
const removeUser = useStore((state: any) => state.removeUser);

• user: 저장된 user 를 가져옵니다.
• setUser : user 속성에 값을 저장합니다.
  ex) setUser("name") 
• removeUser: 저장된 user를 null 로 변경합니다.
  ex) removeUser()

로컬 스토리지 저장 확인

개발자 도구 → Application 탭 -> Local storage 선택하여 저장된 데이터 확인

로컬스토리지 저장 확인