TypeScript Academy · 강의

Zustand 저장소 형식 지정 패턴

인터페이스와 동작으로 형식이 지정된 Zustand 저장소를 정의합니다.

Zustand 저장소 형식 지정 패턴은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Zustand에 타입을 지정하는 이유

Zustand는 간결한 상태 관리 라이브러리입니다. TypeScript를 적절히 통합하면 많은 부수 코드 없이 타입 안전한 저장소 읽기, 작업, 선택자를 사용할 수 있습니다.

import { create } from "zustand";

기본 타입 지정 저장소

저장소 인터페이스를 정의하고 create에 제네릭으로 전달합니다.

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

저장소 상태 읽기

선택자와 함께 훅을 사용해 특정 상태 조각을 읽습니다. TypeScript는 선택자에서 반환 타입을 추론합니다.

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

상태와 작업 분리

명확하게 정리하기 위해 인터페이스에서 상태 속성과 작업 메서드를 분리하는 것이 일반적인 패턴입니다.

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Zustand의 비동기 작업

Zustand는 비동기 작업을 기본적으로 지원하므로 생성기 내부에서 작업 함수를 async로 만들기만 하면 됩니다.

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

immer 미들웨어 타입 지정

변경 가능한 방식으로 업데이트하려면 Zustand의 immer 미들웨어를 사용합니다. 저장소 타입이 올바르게 전달됩니다.

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

devtools 미들웨어

적절한 타입 지정과 함께 devtools를 결합하면 타입을 그대로 유지하면서 Redux DevTools를 지원할 수 있습니다.

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

영속 저장소 타입 지정

persist 미들웨어는 상태를 localStorage에 직렬화합니다. 부분 상태 인터페이스를 사용해 올바르게 타입을 지정합니다.

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

타입이 지정된 슬라이스 패턴

대규모 저장소에서는 타입이 지정된 슬라이스로 나눈 다음 하나의 create 호출에서 결합합니다.

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

React 외부에서 구독하기

타입이 지정된 저장소 API를 사용하면 React 컴포넌트 외부에서도 저장소 상태에 접근하고 변경 사항을 구독할 수 있습니다.

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

복습: Zustand 타입 지정

Zustand 타입 지정에서는 저장소 인터페이스를 정의하고 create에 전달하며, 타입이 지정된 상태를 읽기 위해 선택자를 사용합니다. 또한 커링 패턴을 통해 미들웨어(immer, devtools, persist)를 연결하여 타입이 올바르게 전달되게 합니다.

빠른 확인

관련 없는 변경으로 다시 렌더링하지 않고 컴포넌트에서 Zustand 상태의 특정 부분을 어떻게 읽을 수 있습니까?

학습한 내용

Zustand 저장소는 인터페이스 제네릭을 create에 전달하여 타입을 지정합니다. 효율적이고 타입 안전한 상태 읽기에는 선택자 함수를 사용합니다. immer, devtools, persist 같은 미들웨어는 Zustand의 커링 패턴으로 결합하여 TypeScript의 타입 추론이 올바르게 이루어지게 합니다.

자주 묻는 질문

“Zustand 저장소 형식 지정 패턴” 강의는 무료인가요?

네 — “Zustand 저장소 형식 지정 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Zustand 저장소 형식 지정 패턴”에서 뭘 배우나요?

인터페이스와 동작으로 형식이 지정된 Zustand 저장소를 정의합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Zustand 저장소 형식 지정 패턴” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기