주스텐드

스토어란?

• 스토어(Store)는 중앙에서 애플리케이션의 상태(State)를 한 곳에서 관리하는 공간이다.
• 마치 제일 최상위 부모 컴포넌트가 데이터를 가지고 자식 컴포넌트들에게 필요한 값을 props로 전달하거나, 특정 방식으로 접근하도록 하는 구조라고 볼 수 있다.

비유: 로그인 비밀번호 시스템

• 로그인을 예로 들면:
• 사용자가 비밀번호를 입력한다 → 스토어에 상태가 저장된다.
• 사용자가 비밀번호를 변경한다 → 스토어의 상태가 업데이트된다.
• 이 변경된 상태는 앱 전체에서 동기화되어 반영된다.

왜 스토어가 필요한가?

• 컴포넌트 간에 상태를 공유해야 하는 상황에서, prop drilling을 줄이고 복잡한 데이터 흐름을 단순화하기 위해 사용한다.
• 예를 들어, 로그인 상태, 사용자 정보, 테마, 언어 설정 같은 전역 상태를 다룰 때 유용하다.

기본 사용방법

• 주스텐드 설치 npm i zustand, 여담으로 주스텐드는 리덕스에 비해 사용하기 쉽고 무엇보다 리덕스도 작지만 주스텐드는 빌드 크기가 매우 작다.
• create로 스토어를 생성한다.
• set, get을 가지는데 이는 상태를 변경하거나 set, 조회 get 할 수 있다.
• 객체에서 반환하는 속성을 상태, 메소드는 액션이라 한다.
• 중요한 것은 use이름Store이다. 주의점

import { create } from "zustand";

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

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

사용할 곳에서 가져다 쓰기

• 커스텀 훅 처럼 가져다 쓸 수 있다.

import "./App.css";
import { useCountStore } from "./store/useCountStore";

function App() {
    const { count, increment, decrement } = useCountStore();
    return (
        <>
            <div>{count}</div>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </>
    );
}

export default App;