create

 

🎯 create란 무엇일까요?

**create**는 Zustand에서 상태(store)를 만드는 함수예요.
간단하게 말하면, React 컴포넌트에서 사용할 작은 저장소(스토어)를 생성하는 도구예요.

여기서 중요한 키워드:

• 상태(state): 화면에 표시되는 데이터 (예: 숫자, 문자열, 리스트 등)
• 상태를 바꾸는 방법: 상태를 업데이트하는 함수

 

🍕 상점 이야기로 이해하기

상상을 해보세요! 여러분이 피자 가게를 운영하고 있어요. 🍕

• 주방: 피자를 만들고 관리하는 곳
• 메뉴판: 상태(store)입니다. 어떤 재료(데이터)가 있고, 무엇을 할 수 있는지(상태 업데이트 함수)가 적혀 있어요.
• 손님(컴포넌트): 메뉴판을 보고 피자를 주문하죠.

여기서 **create**는 이 메뉴판(스토어)을 만드는 도구예요!
create를 사용하면 상태와 상태를 바꾸는 방법을 한눈에 정리할 수 있어요.

 

🛠️ create 기본 사용법

간단한 카운터 예제를 통해 create를 사용하는 방법을 알아볼게요.

 

1. Zustand 스토어 만들기

import { create } from "zustand";

// Zustand 스토어 만들기
const useCounterStore = create((set) => ({
  count: 0, // 초기 상태
  increase: () => set((state) => ({ count: state.count + 1 })), // 상태 증가
  decrease: () => set((state) => ({ count: state.count - 1 })), // 상태 감소
}));

설명:

• create: Zustand에서 스토어를 만드는 함수입니다.
• set: 상태를 업데이트하는 함수예요.
• 초기 상태: count: 0에서 시작합니다.
• 상태 변경 함수: increase와 decrease를 통해 count 값을 늘리거나 줄일 수 있어요.

 

2. 스토어 사용하기

React 컴포넌트에서 상태와 함수를 사용해볼게요.

import React from "react";
import useCounterStore from "./store"; // Zustand 스토어 가져오기

function Counter() {
  // Zustand 스토어에서 상태와 함수 가져오기
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={increase}>+1 증가</button>
      <button onClick={decrease}>-1 감소</button>
    </div>
  );
}

export default Counter;

🔍 코드 설명

1. 스토어 만들기
   • create로 상태(count)와 상태를 바꾸는 함수(increase, decrease)를 정의했어요.
2. 스토어 사용하기
   • useCounterStore()를 호출해서 상태와 함수를 가져옵니다.
   • 이 덕분에 React 컴포넌트에서 상태를 쉽게 읽고 업데이트할 수 있어요.
3. 버튼 클릭 시 상태 변경
   • increase()를 호출하면 count 값이 1 증가하고,
   • decrease()를 호출하면 count 값이 1 감소해요.
   • 상태가 바뀌면 React는 자동으로 화면을 업데이트해줍니다!

🎉 결과

• 카운트 값이 화면에 표시됩니다.
• 버튼을 클릭할 때마다 상태가 바뀌고 화면도 함께 업데이트돼요!

 

🧩 create를 사용할 때 좋은 점

1. 코드가 간단하고 직관적
   • 몇 줄만으로 상태와 상태 변경 함수를 정의할 수 있어요.
2. 상태를 쉽게 공유
   • 여러 컴포넌트에서 동일한 상태를 사용할 수 있어요.
3. 유연한 상태 관리
   • 작은 프로젝트부터 큰 프로젝트까지 모두 사용할 수 있어요.

 

🚀 create를 활용한 다양한 예시

1. To-Do 리스트 관리

const useTodoStore = create((set) => ({
  todos: [], // 초기 상태
  addTodo: (task) => set((state) => ({ todos: [...state.todos, task] })),
  removeTodo: (task) =>
    set((state) => ({ todos: state.todos.filter((t) => t !== task) })),
}));

 

2. 로그인 상태 관리

const useAuthStore = create((set) => ({
  user: null,
  login: (userData) => set({ user: userData }),
  logout: () => set({ user: null }),
}));

 

🌟 정리하자면!

create는 Zustand에서 상태와 상태를 변경하는 방법을 정리해서 저장소(store)를 만드는 함수예요.
React 컴포넌트에서 간단하고 빠르게 상태를 공유하고 관리할 수 있어요!