createStore

 

🎯 createStore란 무엇일까요?

**createStore**는 Zustand에서 상태를 만들고 관리하는 함수예요.
쉽게 말하면, "앱의 상태를 저장할 수 있는 작은 창고(스토어)를 만드는 도구"예요.

React 앱에서는 여러 컴포넌트가 같은 데이터를 사용할 때, 이 데이터를 관리하는 중앙 저장소가 필요하죠?
Zustand의 **createStore**를 사용하면 간단하고 깔끔하게 상태 관리를 할 수 있어요!

 

🏠 실생활 비유: 상태 관리 창고

여러분이 작은 햄버거 가게를 운영한다고 생각해 볼게요. 🍔

• 가게 안에는 재료(상태)가 필요해요. 예를 들면 빵, 패티, 치즈가 있겠죠?
• 이 재료들을 어디에 저장할까요? **냉장고(저장소)**에 보관하면 편리하겠죠.
• 직원들은 언제든지 냉장고에 가서 필요한 재료를 꺼내 사용할 수 있어요.

이 비유에서:

• 냉장고 → Zustand의 createStore로 만든 상태 저장소
• 재료 → 우리가 관리해야 할 상태
• 직원(컴포넌트) → 상태를 꺼내서 사용하거나 변경하는 React 컴포넌트

 

🛠️ createStore 기본 사용법

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

 

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에서 createStore를 만드는 함수입니다.
• set: 상태를 업데이트할 때 사용하는 함수예요.
• count: 스토어에 저장할 초기 상태 값입니다.
• increase와 decrease: 상태를 변경하는 함수입니다.

2. 스토어 사용하기

이제 만든 스토어를 React 컴포넌트에서 사용해 볼게요!

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

function Counter() {
  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)
   • useCounterStore는 상태(count)와 상태를 변경하는 함수(increase, decrease)를 담고 있어요.
2. 스토어 가져오기
   • useCounterStore()를 사용해서 스토어에서 상태와 함수들을 가져옵니다.
   • 이 덕분에 React 컴포넌트에서 쉽게 상태를 읽고 변경할 수 있어요.
3. 버튼 클릭
   • increase 함수나 decrease 함수를 호출하면 상태(count)가 바뀌고, 화면이 업데이트됩니다.

 

🌟 Zustand의 장점

1. 간단하고 직관적
   • 복잡한 설정 없이 코드 몇 줄로 상태를 만들고 관리할 수 있어요.
2. React 컴포넌트 어디서든 사용 가능
   • Zustand 스토어를 사용하면 여러 컴포넌트에서 같은 상태를 쉽게 공유할 수 있어요.
3. 빠른 성능
   • 상태가 변경될 때 관련된 컴포넌트만 업데이트되기 때문에 성능도 좋아요!

🍔 다른 비유: 메뉴판과 직원

Zustand를 다시 햄버거 가게 비유로 돌아가 볼까요?

• createStore: 메뉴판을 만들고 "재료(상태)"와 "만드는 방법(함수)"을 정리해둡니다.
• React 컴포넌트: 가게의 직원들이 메뉴판을 보고 필요한 상태를 가져와서 사용합니다.
• 상태 업데이트: 버튼을 누르면 상태를 변경해서 화면에 즉시 반영합니다.

이렇게 Zustand는 정말 간단하게 상태를 만들고 사용할 수 있도록 도와주는 훌륭한 도구예요!

 

🚀 한 줄 요약

createStore는 Zustand에서 상태(데이터)를 저장하고 관리하는 작은 저장소를 만드는 함수예요.
React 컴포넌트 어디서든 쉽게 상태를 꺼내고 바꿀 수 있도록 도와줍니다.