Zustand 와 Recoil의 차이

Zustand와 Recoil은 React 애플리케이션에서 상태 관리를 쉽게 만들어주는 JavaScript 라이브러리입니다. 두 라이브러리는 모두 고도로 직관적이며, 가볍지만, 특정 기능과 구조에서는 몇 가지 차이점을 가지고 있습니다.

상태 생성 방법:

• Zustand: Zustand에서는 상태를 생성하기 위해 create 메서드를 사용합니다. 이 메서드는 상태와 이를 변경하는 액션을 포함하는 객체를 반환합니다.
• Recoil: Recoil에서는 atom과 selector라는 두 가지 주요 개념을 사용하여 상태를 생성합니다. atom은 상태의 단위이며, selector는 파생 상태, 즉 상태를 변환하거나 계산하는 방법을 나타냅니다.

상태 접근:

• Zustand: Zustand에서는 상태에 접근하기 위해 hook(예: useStore)를 사용합니다. 이 hook을 사용하여 액션을 직접 호출할 수 있습니다.
• Recoil: Recoil에서는 상태에 접근하거나 변경하기 위해 useRecoilState, useRecoilValue와 같은 hook을 사용합니다.

상태 관리 방식:

• Zustand: Zustand는 상태 관리를 더 함수적이고 간결한 방식으로 접근합니다. 또한, Zustand는 상태 슬라이스(slice)에 따라 여러 스토어를 생성하는 것을 쉽게 만들어 줍니다.
• Recoil: Recoil은 상태를 관리하는 데 좀 더 구조적인 방식을 사용합니다. 특히 비동기 데이터 흐름과 관련된 복잡한 상호 작용을 다루는 데 능숙합니다.

사이즈와 의존성:

• Zustand: Zustand는 매우 가벼운 라이브러리이며, 추가적인 의존성이 없습니다.
• Recoil: Recoil은 Zustand보다 조금 더 크지만, 여전히 가볍습니다. 하지만 React에 의존하며, 그에 따라 업데이트에 영향을 받을 수 있습니다.

사용 사례:

• Zustand: Zustand는 간결하고, 중앙 집중식이 아닌 상태 관리를 원하는 애플리케이션에 잘 맞습니다.
• Recoil: Recoil은 큰 프로젝트와 복잡한 상태 로직에 잘 맞습니다. 특히 동시성 모드와 같은 고급 React 기능을 활용하는데 유용합니다. Recoil은 아톰과 셀렉터라는 강력한 추상화를 제공하여 상태의 관계와 상호 작용을 명확하게 정의할 수 있게 해줍니다. 이는 React 컴포넌트 트리에서 데이터 흐름을 이해하고 조작하는 데 매우 유용하며, 비동기 작업과 같은 복잡한 상태 관리 문제를 더 쉽게 해결할 수 있게 도와줍니다. 그러나 이러한 기능들은 약간의 학습 곡선을 동반합니다.

먼저, Recoil의 간단한 사용 예제를 들어보겠습니다.

Recoil을 사용하려면 우선 RecoilRoot가 필요합니다. 앱의 최상위 컴포넌트에 RecoilRoot를 래핑해야 합니다:

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );
}

다음으로, 상태를 생성하려면 atom을 사용해야 합니다. atom은 상태의 최소 단위입니다:

import { atom } from 'recoil';

export const counterState = atom({
  key: 'counterState', // unique ID (with respect to other atoms/selectors)
  default: 0, // default value (aka initial value)
});

이제 생성한 counterState라는 atom을 사용하는 컴포넌트를 만들어 봅시다. 이 컴포넌트에서는 useRecoilState라는 훅을 사용하여 atom의 상태를 읽고 쓸 수 있습니다:

import { useRecoilState } from 'recoil';
import { counterState } from './counterState';

function MyComponent() {
  const [counter, setCounter] = useRecoilState(counterState);

  return (
    <div>
      Counter: {counter}
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <button onClick={() => setCounter(counter - 1)}>Decrement</button>
    </div>
  );
}

위의 컴포넌트에서, 우리는 useRecoilState 훅을 사용하여 counterState의 현재 상태를 얻고, 그 상태를 변경하는 함수를 얻습니다. 이 함수를 사용하여 카운터를 증가시키거나 감소시킬 수 있습니다.

---

먼저, Zustand 스토어를 생성해야 합니다. Zustand 스토어는 상태와 상태를 변경하는 함수들을 포함합니다. 아래 코드는 카운터 상태를 가진 스토어를 만드는 예시입니다:

import create from 'zustand';

// Define your store
export const useStore = create(set => ({
  counter: 0,
  increment: () => set(state => ({ counter: state.counter + 1 })),
  decrement: () => set(state => ({ counter: state.counter - 1 })),
}));

위의 코드에서, useStore는 Zustand 훅입니다. 이 훅은 스토어의 상태를 가져오거나, 스토어의 함수를 사용하여 상태를 변경하는 데 사용됩니다.

다음으로, 위에서 생성한 스토어를 사용하는 컴포넌트를 만들어 보겠습니다:

import { useStore } from './store';

function MyComponent() {
  const { counter, increment, decrement } = useStore();

  return (
    <div>
      Counter: {counter}
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

이 컴포넌트에서는 useStore 훅을 사용하여 스토어의 상태를 가져오고, increment와 decrement 함수를 사용하여 상태를 변경합니다. 이렇게 하면 컴포넌트가 스토어의 상태에 반응적으로 업데이트되고, 버튼 클릭에 반응하여 상태를 변경할 수 있습니다.