0Pricing
Frontend Academy · 강의

가벼운 React 상태 관리를 위한 Zustand

create()로 Zustand 저장소를 만들고 훅으로 상태를 읽으며 액션으로 상태를 업데이트해, 보일러플레이트 없는 간결한 API를 활용합니다.

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

Zustand란 무엇입니까?

Zustand는 React를 위한 작고 빠른 상태 관리 라이브러리입니다. 전체 API가 매우 간단합니다. 스토어를 만들고, 훅을 사용하여 읽고 업데이트하면 됩니다. 리듀서, 액션, 보일러플레이트가 없습니다.

스토어 만들기

create()는 일반 객체로 상태와 액션을 포함하는 스토어를 정의합니다. 반환되는 값은 훅입니다.

import { create } from 'zustand';

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

export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

스토어 상태 읽기

선택 함수와 함께 훅을 호출하여 특정 상태 부분을 구독하십시오. 선택한 부분이 변경될 때만 구성 요소가 다시 렌더링됩니다.

function Counter() {
  const count = useCounterStore(state => state.count);
  return <p>Count: {count}</p>;
}

액션 읽기

액션도 같은 방식으로 선택하십시오. 액션은 변경되지 않으므로 액션을 선택해도 불필요한 추가 렌더링이 발생하지 않습니다.

function Controls() {
  const { increment, decrement } = useCounterStore(
    state => ({ increment: state.increment, decrement: state.decrement })
  );
  return (
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

set()으로 상태 업데이트

set() 함수는 업데이트를 얕게 병합합니다(React 클래스 구성 요소의 setState와 비슷합니다). 이전 상태에 따라 달라지는 업데이트에는 함수를 전달하십시오.

// Merge:
set({ loading: true });

// Function for dependent updates:
set(state => ({ count: state.count + 1 }));

// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);

비동기 액션

Zustand의 액션은 비동기일 수 있습니다. 비동기 작업을 기다린 후 set()을 호출하기만 하면 됩니다.

export const useUsersStore = create<UsersStore>((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const users = await fetch('/api/users').then(r => r.json());
    set({ users, loading: false });
  }
}));

슬라이스 — 대규모 스토어 구성

대규모 스토어를 슬라이스(별도의 객체)로 나눈 다음 결합하십시오. Zustand의 방식에는 슬라이스 추상화가 필요하지 않지만, 대규모 스토어를 깔끔하게 구성할 수 있는 방법입니다.

미들웨어: persist

persist 미들웨어는 Zustand 상태를 localStorage에 저장하고 로드할 때 복원합니다. 설정도 매우 간단합니다.

import { persist } from 'zustand/middleware';

export const useSettingsStore = create<Settings>(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme })
    }),
    { name: 'app-settings' } // localStorage key
  )
);

미들웨어: devtools

devtools 미들웨어를 사용하면 Zustand에 Redux DevTools 지원을 추가할 수 있습니다. 전체 액션 기록과 시간 여행 기능을 사용할 수 있습니다.

Zustand와 Redux Toolkit 비교

Zustand는 간단하고 보일러플레이트가 없으며 빠르게 설정할 수 있어 소규모에서 중간 규모 앱에 적합합니다. RTK는 구조적이고 확장 가능하며 동급 최고의 DevTools를 제공하므로 대규모 팀에 더 적합합니다. 둘 다 훌륭한 선택이지만, 대부분의 앱에서는 Zustand의 단순성이 장점입니다.

선택 함수와 성능

항상 구성 요소에 필요한 최소한의 상태 부분만 선택하십시오. 전체 상태 객체를 선택하면 스토어가 변경될 때마다 다시 렌더링됩니다. 여러 속성을 선택할 때는 zustand/shallow의 shallow를 사용하십시오.

import { shallow } from 'zustand/shallow';

const { theme, font } = useSettingsStore(
  state => ({ theme: state.theme, font: state.font }),
  shallow // compare each property shallowly
);

빠른 확인

전체 React 앱에서 사용할 수 있는 Zustand 스토어를 어떻게 만듭니까?

복습: Zustand

create()는 상태와 액션을 정의합니다. 반환되는 값은 훅입니다. 불필요한 다시 렌더링을 피하려면 상태 부분을 선택하십시오. set()은 상태 업데이트를 병합합니다. 비동기 액션은 await 후 set()을 호출합니다. localStorage에는 persist 미들웨어를 사용합니다. Redux DevTools 통합에는 devtools를 사용합니다. Provider는 필요하지 않습니다.

자주 묻는 질문

“가벼운 React 상태 관리를 위한 Zustand” 강의는 무료인가요?

네 — “가벼운 React 상태 관리를 위한 Zustand” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“가벼운 React 상태 관리를 위한 Zustand”에서 뭘 배우나요?

create()로 Zustand 저장소를 만들고 훅으로 상태를 읽으며 액션으로 상태를 업데이트해, 보일러플레이트 없는 간결한 API를 활용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“가벼운 React 상태 관리를 위한 Zustand” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. Redux Toolkit: createSlice와 configureStore
  2. 가벼운 React 상태 관리를 위한 Zustand
  3. Vue를 위한 Pinia: defineStore와 storeToRefs
  4. 전역 상태와 로컬 상태를 선택하는 기준
← Frontend Academy(으)로 돌아가기