[stdev 해커톤] zustand 사용하기

이번 프로젝트에서 배운 점으로 "상태 관리-zustand"를 말했었다.
관련해서 코드와 함께 자세히 소개하고자 한다.

이번 프로젝트에서 배운 점

원래 나는 상태 관리를 할 때 주로 jotai의 atom이나 recoil을 사용했었다.
jotai에서는 atom을 만들어두고 필요한 컴포넌트에서 useAtom으로 값을 읽거나 바꾸는 식으로 작업하는게 편했다.

이번 프로젝트에서 처음으로 zustand를 사용했다.

zustand는 생각보다 훨씬 더 심플하고 가벼웠다!!

코드를 봐보자.

import { create } from "zustand";

interface EmotionState {
  selectedEmotion: string;
  setSelectedEmotion: (emotion: string) => void;
}

export const useEmotionStore = create<EmotionState>((set) => ({
  selectedEmotion: "",
  setSelectedEmotion: (emotion) => set({ selectedEmotion: emotion }),
}));

이렇게 create 함수 하나로

• 상태 (selectedEmotion)랑
• setter (setSelectedEmotion)을 한 번에 관리할 수 있었다.

실제로 컴포넌트에서 사용할 때도 매우 깔끔했다!!

예를 들어 감정을 고르는 EmotionContainer에서

const { selectedEmotion, setSelectedEmotion } = useEmotionStore();

이렇게 가져오고 감정을 클릭하면 바로 setSelectedEmotion만 호출하면 끝이다.

다른 컴포넌트에서도 "현재 선택된 감정"에 바로 접근할 수 있어서 상태공유가 편했다.

Jotai atom은 "컴포넌트마다 필요한 상태를 세세하게 나눠 쓰는" 느낌이었다면,
Zustand는 "조금 더 하나의 store를 중심으로, 필요한걸 꺼내 쓰는" 느낌이었다.

특히 이번처럼 "하나의 선택값"을 여러 페이지와 컴포넌트에서 쓰는 경우에는 zustand 방식이 훨씬 편하고 깔끔했던 것 같다.

프로젝트 규모가 크지 않았기에 심플하고 빠른 상태 관리로서 zustand는 최적의 선택이었던 것 같다.