React에서의 상태관리 방법은 아주 다양해요.
대표적으로 Context Api, Redux, MobX... 등이 있어요.
그 중에서도 Redux는 개인적으로 문법이나 사용하는 방법이 좀 난해한 편이더라구요. 초기설정부터 문법까지 익히는 데 좀 어렵다라는 느낌을 많이 받았어요.

또한 Context Api는 Redux보다 사용방법이 간단하고 직관적이 었지만, Context로 전달되는 값이 변경될 때마다 해당 Context를 사용하는 모든 자손 컴포넌트가 리렌더링된다는 단점이 있었어요.

이번엔 상태관리의 채신기술 Zustand library를 소개해보도록 할게요.

⚙️ Zustand?

Zustand는 독일어로 '상태' 라는 뜻을 가진 단어라고 해요.

기존의 방법인 Store 구조를 활용하는 것은 동일하지만, 상태를 정의하고 사용하는 방법이 비교적 아주아주 단순해서 처음 사용하는 사람도 쉽게 사용할 수 있습니다.

좋은 장점중의 하나는 Provider로 감싸주지 않아도 된다는 특징을 가지고 있는 것 같아요.
즉 부모 자식컴포넌트 관계가 사라지고, 불필요한 렌더링을 막아주는 장점이 있는 것 같습니다. (context Api의 단점)

또한 초기 설정 코드가 아아주 간결하다는 장점이 있어요.(Redux의 단점)

📕 Zustand 사용법

1. Zustand 설치

가장 먼저 Zustand library를 설치합니다.
npm i zustand

2. Store 선언

데이터를 저장하는 Store를 사용할 때는 create 라는 method를 사용해서 선언합니다.

import create from 'zustand';

// set method로 상태 변경 가능
const useStore = create(set => ({
  count: 0,
  increaseCount: () => set(state => ({ count: state.count + 1 })),
  setThree: (input) => set({ count: input }),
}));

count라는 변수와
count를 1씩 증가하는 increaseCount(),
input 값을 인자로 받아서 count값을 3 으로 초기화 하는 setThree(),
를 만들어봤어요.

3. Store 사용

function App() {
  const { count, increaseCount, setThree } = useStore();
  return (
    <div className='App'>
      <div>Zustand ! {count}</div>
      <button onClick={increaseCount}>+1</button>
      <button onClick={() => setNum(3)}>set3</button>
    </div>
  );
}

사용시 useStore() 로 하나씩 꺼내와서 쓰면 돼요.
아주아주 간단해요.
context Api를 쓰다가 redux를 배워볼까 했는데 좀 나중으로 미뤄야 겠어요.