Zustand와 TypeScript

Zustand with TypeScript

정의

• Zustand 스토어에 TypeScript를 적용하여 상태와 액션의 타입을 정의하고 관리하는 방식
• 런타임 이전에 타입 체크를 통해 안정성을 확보한다.
• IDE의 자동 완성 기능을 통해 개발 생산성을 향상시킨다.

특징

• 강력한 타입 추론
  • create 함수에 제네릭을 사용하여 스토어의 구조를 명확히 할 수 있다.
• 코드 안정성
  • 상태 변경 시 잘못된 데이터 형식이 들어오는 것을 컴파일 단계에서 방지한다.
• 유지보수 용이성
  • 프로젝트 규모가 커져도 상태의 구조를 한눈에 파악하기 쉽다.

장점

• 스토어 호출 시 상태와 액션에 대한 자동 완성이 지원된다.
• 리팩토링 시 타입 에러를 통해 수정이 필요한 부분을 즉시 확인할 수 있다.
• 협업 시 다른 개발자가 스토어의 구성을 이해하기 훨씬 수월하다.

단점

• 초기 설정 시 인터페이스 정의 등의 추가적인 코드가 필요하다.
• 라이브러리 업데이트 시 타입 정의 방식이 변경될 수 있어 확인이 필요하다.

사용 방법

State 및 Action 타입 정의

스토어에서 사용할 데이터와 함수들의 타입을 인터페이스로 먼저 정의한다.

interface CounterState {
  count: number;
  increase: (by: number) => void;
  reset: () => void;
}

Store 생성하기

create 함수 호출 시 정의한 인터페이스를 제네릭으로 전달한다.

import { create } from 'zustand';

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increase: (by) => set((state) => ({ count: state.count + by })),
  reset: () => set({ count: 0 }),
}));

export default useCounterStore;

컴포넌트에서 호출

컴포넌트 내에서 Hook을 호출하여 상태와 액션을 사용한다. 이때 타입이 자동으로 추론된다.

import useCounterStore from './useCounterStore';

const Counter = () => {
  const { count, increase, reset } = useCounterStore();

  return (
    <div>
      <h3>Count: {count}</h3>
      <button onClick={() => increase(1)}>Increase</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};