Zusatand란?

* 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리

*Zusatand독일어로 상태래..

• React의 데이터 흐름은 단방향으로 이루어져야 한다는 원칙이 있다
• 이런 데이터 흐름은 단순하고 예측 가능하다
• 컴포넌트 간의 관계를 명확히 정의하기에 유지보수성을 향상시킨다

하지만 데이터를 전달하는 과정에서 커쳐야하는 컴포넌트가 많은 상황이라면

1. 최상위 부모 컴포넌트에서 상태|데이터 보유
2. 중간 혹은 하위 컴포난트가 해당 데이터에 접근 필요
3. 중간에 있는 다른 컴포넌트는 해당데이터가 필요없지만 데이터를 자식 컴포넌트에 전달 필요
4. 데이터는 여러 컴포넌트를 통과하여 목적지에 도달
   => prop drilling

• 유지보수도 어렵고 성능저하의 우려도 있다
• 그래서 상태 관리가 필요

---

다양한 상태관리 라이브러리

• Redux, Context API, Zustand, Recoil...
  리액트 상태 관리 라이브러리, 어떤 것을 써야 할까?

---

Zustand 사용법

1. zustand 설치

npm i zustand

2. 상태 저장소 생성

Zustan의 create 함수를 사용하여 상태 저장소를 생성

3. 상태 읽기와 쓰기

useStore 훅을 통해 저장소에 접근하여 상태를 읽거나 업데이트할 수 있다

예제 : 카운터 상태 관리

1. Zustand Store 정의

// store.js
import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0, // 초기 상태
  increment: () => set((state) => ({ count: state.count + 1 })), // 상태 업데이트
  decrement: () => set((state) => ({ count: state.count - 1 })), // 상태 업데이트
}));

export default useCounterStore;코드를 입력하세요

2. 상태를 사용하는 컴포넌트

// App.js
import React from 'react';
import useCounterStore from './store';

const App = () => {
  const count = useCounterStore((state) => state.count); // 상태 읽기
  const increment = useCounterStore((state) => state.increment); // 액션 호출
  const decrement = useCounterStore((state) => state.decrement); // 액션 호출

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Count: {count}</h1>
      <button onClick={increment} style={{ marginRight: '10px' }}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default App;

3. 결과
   초기 값은 0으로 설정됩니다.
   "Increment" 버튼을 누르면 값이 증가하고, "Decrement" 버튼을 누르면 감소한다.