Zustand 사용 후기

프로젝트를 진행하면서 상태관리 도구를 하나 선정해서 도입하려고 마음먹었다.

선택지에는 redux-toolkit, Recoil, Zustand 가 있었다.

zustand를 선택한 이유는?

이전부터 사용이 간단한 상태관리 도구를 사용해보고 싶다는 생각이 있었기에 redux, redux-toolkit 은 제외되었다. Recoil은 더이상 업데이트를 하지 않고 많은 사람들이 zustand를 추천해서 도입하게 되었다.

Zustand 설치

npm install zustand

store 생성

create를 통해 store를 생성 해준다.

store는 여러개 생성 할수 있다.

useStore 라고 작명해도 되지만 import할 때

zustand의 useStore 말고 우리가 작성한 useStore 를 import 를 해야한다.

// store.ts

import { create } from 'zustand'

interface DataStore {
    data: string;
    updateData: (inputData: string) => void;
    deleteData: () => void;
}

const useDataStore = create((set) => ({
  data: '',
  updateData: (inputData) => set({ data: inputData }),
  deleteData: () => set({ data: '' }),
}));

export default useDataStore;

❌ 주의 - store 생성 할때

react의 useState와 사용법이 비슷해 보이지만 다르다!

// useState의 사용법

const [data, setData] = useState<string>('')
// setData는 아래와 같이 사용하면된다.
setData('Tommy')

// zustand의 사용법
// { data: inputData } 형태로 넣어주어야한다.
updateData: (inputData) => set({ data: inputData }),
deleteData: () => set({ data: '' }),
// 잘못된 사용법
updateData: (inputData) => set(inputData)

처음 setData 처럼 사용이 가능한 줄 알고 오랜시간 삽질을 했다...

잘못된 사용법으로 작성 시 updateData는 function이 아니라는 결과가 나온다

상태 / 상태 관리 사용

import React from "react";
import useDataStore from './store.ts';

function App(){
    const data = useDataStore((state) => state.data);
    const updateData = useDataStore((state) => state.updateData);
    const deleteData = useDataStore((state) => state.deleteData);

    return (
        <div>
            <p>데이터 : {data}</p>
        </div>
    );
}

사용하고 싶은 컴포넌트 및 위치에서 import해서 사용하면 상태와 액션을 사용 할 수 있다.

이전에 공부했던 redux, redux-toolkit 보다는 확실히 구성과 코드가 간단하기에 전역 상태 관리를 편하게 할수있었다. 전역 상태관리를 도입 했으니 전역으로 상태 관리가 필요한 상태와 컴포넌트 상태관리가 필요한 상태를 분류해서 작성 해볼까 한다.