[React] 상태관리 라이브러리 Zustand

Zustand 공식문서

Zustand?

Zustand는 독일어로 상태라는 뜻을 가진 상태 관리 라이브러리이다

3번의 프로젝트를 진행하는 동안 Redux-Toolkit을 사용하여 상태관리를 했었다. Zustand의 경우 코드가 간단하고, 요즘 가장 인기 있는 라이브러리여서 트렌드를 따라~(주변에서 곰돌이가 귀엽다고 추천해줬었다) 이번 프로젝트 때 도입해보려고 한다.

How to install Zustand

1. yarn add zustand
2. npm install zustand

Zustand Example

모달창 open 여부를 관리하는 예제를 만들어보았다.

1. store를 생성해준다.

LoginModalStore.ts

// zustand import
import create from 'zustand';

interface ModalStore {
    isOpen: boolean;
    openModal: () => void;
    closeModal: () => void;
}

// 상태 컨테이너 생성
const useModalStore = create<ModalStore>((set) => ({
    isOpen: false,
    openModal: () => set({ isOpen: true }),
    closeModal: () => set({ isOpen: false }),
  }));
  
  export default useModalStore;

2. 사용하고 싶은 곳에서 사용해준다

'use client'

// 만들어 놓은 useModalStore를 활용한다
import useModalStore from "@/zustand/LogInModalStore"

// 로그아웃 일 때의 컴포넌트
export default function NavRightLoggedOut () {
    // 로그아웃일 때 로그인 모달 창 오픈 버튼이 되어줘야 한다
    const { openModal } = useModalStore();

    return (
        <div>
            <div onClick={openModal}>로그인/회원가입</div>
            <div onClick={openModal}>내상점</div>
        </div>
    )
}

가볍게 예제 하나만 구현해봤을 때, redux-toolkit 보다 체감상 쉬운 것 같다.