[ React ] 상태 관리 툴 비교 분석 Recoil vs Zustand

 

 

 

회사에서 새로운 React 프로젝트를 세팅중인데, 전역 상태관리 툴 중에서 팀원들이 빠르게 배우고 활용할 수 있도록 쉽게 React 프로젝트의 상태 관리가 가능한 툴 2가지를 비교해 보게 되었다.

 

 

 

 

 

 

Recoil (v0.7.7 기준)

 

https://recoiljs.org/ko/

 

 

전체 카운터 코드 

counter sample code

 

 

Recoil은 아래처럼 쓰인다. (테스트 코드 일부)

import "./App.css";
import { countState } from "./state/countState";
import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil";

function App() {
  const count = useRecoilValue(countState);
  const setCount = useSetRecoilState(countState);
  const removeAllCounts = useResetRecoilState(countState);

  return (
    <div className="App">
      <div>
        <img
          src="https://recoiljs.org/img/logo.svg"
          className="logo"
          alt="recoil logo"
          style={{ backgroundColor: "#ffffff" }}
        />
      </div>
      <h1>Test Recoil !</h1>
      <div className="card">
        <button onClick={() => setCount((state) => state + 1)}>
          count is {count}
        </button>
      </div>
      <div className="card">
        <button onClick={removeAllCounts}>remove counts</button>
      </div>
    </div>
  );
}

export default App;

 

 

• react의 useState와 비슷하게 사용할 수 있어서 쉽게 배울 수 있음
  
  
• 초기 세팅이 필요함. (recoil을 사용할 최상위 컴포넌트에 RecoilRoot 선언 등등)
  
  
• state에 대한 액션이 component 단위로 일어나서 액션에 대한 관리가 까다로울 수 있음.
  
  
• recoil만의 state에 대한 개념이 존재 (atom)
  
  
• 액션에 대한 커스텀 네이밍 불가능. (이렇게 하려면 따로 hook을 만들거나, 함수를 만들어서 써야함.)

 

 

 

 

 

 

 

 

 

 

 

 

Zustand (v4.3.8 기준)

 

 

https://github.com/pmndrs/zustand

 

 

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

function App() {
  const count = useCountStore((state) => state.count);
  const increaseCount = useCountStore((state) => state.increaseCount);
  const removeAllCounts = useCountStore((state) => state.removeAllCounts);

  return (
    <div className="App">
      <div>
        <img
          src="https://github.com/pmndrs/zustand/raw/main/bear.jpg"
          className="logo zustand"
          alt="zustand logo"
        />
      </div>
      <h1>Test Zustand !</h1>
      <div className="card">
        <button onClick={increaseCount}>count is {count}</button>
      </div>
      <div className="card">
        <button onClick={removeAllCounts}>remove counts</button>
      </div>
    </div>
  );
}

export default App;

전체 카운터 코드 

counter sample code

 

 

 

• 엄청 심플하게 사용할 수 있음.
  
  
• store을 컴포넌트와 분리하여 state, get, set 등의 액션까지 한번에 관리가 가능함.
  
  
• 프로젝트 규모가 커질수록 관리가 용이.
  
  
• 내장 메서드를 이용하여 스토리지 사용 가능.
  
  
• state에 대한 액션에 대해 네이밍 가능.

 

 

 

 

 

 

 

 

 

 

-> 기존에 사이드 프로젝트에서 Recoil을 사용했으나, Zustand를 사용해보니 프로젝트의 규모가 커질수록 전역 상태의 관리가 Recoil보다 Zustand가 용이할 것 같다는 판단이 되어, 우리는 Zustand를 사용하기로 했다.

 

 

 

---

 

🌸 출처 🌸

 

Zustand - Github
Recoil