Recoil vs Zustand

Recoil과 Zustand는 둘 다 React 애플리케이션에서 상태 관리를 위한 라이브러리이다.

공통점:

• 둘 다 비교적 경량 라이브러리로, 리액트 애플리케이션에 부담을 덜 준다.
• React 애플리케이션에서 상태 관리를 간단하게 하기 위해 설계되었다
• 상태를 가져오고 업데이트하기 위해 커스텀 훅을 사용할 수 있다.
• 여러 스토어를 만들어 특정 컴포넌트에서 필요한 상태만 사용하는 것이 가능하다.

차이점:
1. API 디자인:

• Recoil은 기본 단위는 atom(상태)과 selector(파생 상태)입니다. 각각의 atom은 독립적인 상태 단위를 나타내며, selector는 다른 atom의 값을 기반으로파생 상태를 생성합니다.

import { atom, selector } from 'recoil';

// Atom 정의
export const countState = atom({
  key: 'countState',
  default: 0,
});

// Selector 정의
export const doubledCountState = selector({
  key: 'doubledCountState',
  get: ({ get }) => {
    const count = get(countState);
    return count * 2;
  },
});

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { countState, doubledCountState } from './state';

const Counter = () => {
  const [count, setCount] = useRecoilState(countState);
  const doubledCount = useRecoilValue(doubledCountState);

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Doubled: {doubledCount}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

• Zustand은 상태는 생성함수로 정의됩니다. 사용자는 오브젝트 형태로 상태를 정의하고, 훅을 통해 상태를 가져오고 수정합니다.

import create from 'zustand';

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

export default useStore;

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

2. 상태 의존성:

• Recoil은 atom과 selector 사이에 의존성을 설정할 수 있으며, 이를 통해 파생된 상태를 자동으로 업데이트할 수 있습니다.
• Zustand는 단순한 전역 상태 관리 시스템으로서, 상태의존성은 직접적으로 지원되지 않습니다. 대신 기존 상태를 기반으로 상태를 업데이트하는 함수형 접근 방식을 촉진합니다.

3. 상태 공유와 지역적 관리

• Recoil은 주로 전역 상태 관리를 위한 하지만, React Context와 결합하여 지역 상태와 전역 상태를 동시에 관리할 수도 있습니다.
• Zustand주로 전역 상태 관리를 위한 것이지만, 여러 스토어를 만들어 특정 컴포넌트에서 필요한 상태만 사용하는 것도 가능합니다.

4. 퍼포먼스

• Recoil은 그라프를 사용하여 상태의 변경을 추적하고 필요한 부분만 업데이트를 하여 퍼포먼스를 최적화합니다.
• 경량화된 상태 관리로, 상태의 변경 감지가 간단하고 빠르며 React의 최적화를 잘 활용합니다.

5. 리액트 라이프사이클

• Recoil 상태는 RecoilRoot 컴포넌트 내에서 작동하기 한다. 이 컴포넌트는 상태의 최상위 컨테이너 역할을 하며, Recoil의 모든 상태는 이 컨테이너 내에서 관리된다.
  Recoil의 상태와 상호작용하기 위해 useRecoilState, useRecoilValue, useSetRecoilState리액트 라이프사이클에서 상태 접근, 변경이 가능하다.

• Zustand는 리액트 라이프사이클 밖에서도 상태에 접근, 변경할 수 있다.