🥜 [React] 상태관리 라이브러리 비교하기 (ContextAPI, Redux, Recoil, Zustand)

왜?

상태관리란?

프론트엔드에서 state는 Rendering하는데 있어서 영향을 미칠 수 있는 값

상태를 어떻게 관리하느냐에 따라 로딩속도와 사용감 개선이 확연히 차이가 난다.

Frontend 개발자에게 상태관리는 중요한 임무가 되었다.

따라서 회사마다 상태관리 하는 법도 제각기 다르기 떄문에

항상 사용하던 상태관리 라이브러리 외에 다른 라이브러리를

사용해보고자 오늘은 상태관리 라이브러리들을 알아볼 생각이다.

---

ContextAPI

먼저 알아볼 것은 ContextAPI. 정말 오래된 기술이다.

그만큼 React 내에 자체적으로 내장 되어있는 기술이다. 쓰기도 나쁘지 않은 편이지만

단점은 후술하도록 하겠다.

// GlobalProvider.tsx

import { ReactNode, createContext, useState } from "react";

interface IContextProps {
  counter: number;
  onPlus: () => void;
} // 전역변수의 타입 지정

interface IProviderProps {
  children: ReactNode;
} // 전역변수를 가져다 쓸 children-component 의 type 설정

export const CounterContext = createContext<IContextProps>({
  counter: 0,
  onPlus: () => {},
}); // 전역변수를 담을 Context 를 생성 및 초기값 지정

export default function GlobalProvider({ children }: IProviderProps) {
  const [counter, setCounter] = useState<number>(0);

  const onPlus = () => {
    setCounter((current: number) => (current += 1));
  };

  return (
    <CounterContext.Provider value={{ counter, onPlus }}>
        {children}
    </CounterContext.Provider>

  ); // 전역변수를 담고 있는 CounterContext.Provider 로 children-component 를 감싼다!

}

1. 먼저, global-state 를 관리 할 Provider 를 생성한다.

2. global-state 를 담을 context 를 생성 한 후

3. 후에 뿌려질 children-component 에 감싸준다.

// main.tsx (index.tsx)
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import GlobalProvider from "./GlobalProvider.tsx";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <GlobalProvider>
      <App />
    </GlobalProvider>
  </BrowserRouter>
);

// test01.tsx
import { useContext } from "react";
import { CounterContext } from "./GlobalProvider";

export default function Text1() {
  const { counter, onPlus } = useContext(CounterContext);
  // Context 를 사용하기 위해 useContext 를 이용해 CounterContext 를 연결
  return (
    <div>
      <p>COUNT : {counter}</p>
      <button onClick={onPlus}>+++</button>
    </div>
  );
}

ContextAPI 는 React 에 자체 내장되어있다는 것만으로도 충분히 매력적인데

단점이 있었다.

한번 수정 되면 Provider 내 모든 Components 가 re-rendering 된다는 것…

따라서 불필요한 rendering 이 많아진다.

(이 아저씨 처럼 된다… 신나는데)

---

Redux

많이들 사용하는 redux. 사용하는 사람마다 쓰는법이 다양한데

왜냐면 Redux 자체가

여러 추가 라이브러리가 많기 때문이다.

그로 인해 사용하기가 은근 까다로울 정도

최대한 간단하게 만들어보았다.

// store.ts
import { legacy_createStore as createStore } from "redux";

// 액션 타입 정의
const INCREMENT = "INCREMENT";

// 액션 생성자
export const incrementSummary = () => ({ type: INCREMENT });

// 초기 상태 정의
interface AppState {
  summary: number;
}

const initialState: AppState = {
  summary: 0,
};

// 리듀서 함수
const appReducer = (state = initialState, action: any) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        summary: state.summary + 1,
      };
    default:
      return state;
  }
};

// 스토어 생성
const store = createStore(appReducer);

export default store;

상태관리를 하기 위한 store 를 생성해준다.

// main.tsx

import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./utils/store.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>
);

최상단에 Provider 로 store 를 걸어서 state 를 제공해준다.

// Test.tsx
import { useDispatch, useSelector } from "react-redux";
import { incrementSummary } from "./utils/store";

export default function Test() {
  const dispatch = useDispatch(); // 액션을 디스패치할 수 있는 함수
  const summary = useSelector((state: any) => state.summary);
  // useSelector 사용하여 Redux 스토어의 상태를 선택
  return (
    <div>
      <h1>Summary: {summary}</h1>
      <button onClick={() => dispatch(incrementSummary())}>Increment</button>
    </div>
  );
}

개인적으로 너무 어렵다.

Recoil

내가 제일 자주 쓰는 라이브러리, 간단한 프로젝트에 아주 유용하다고 생각한다.

import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </BrowserRouter>
);

먼저 Recoil 을 사용하기 위해 최상단에 RecoilRoot 를 걸어준다

import { atom } from "recoil";

export const summaryState = atom({
  key: "summaryState",
  default: 0,
}); // 고유 키 값과 기본 값 정의

import { selector } from 'recoil';

const charCountState = selector({
  key: 'charCountState',
  get: ({get}) => {
    const text = get(textState);
    return text.length;
  },
}); // atom 값을 직접 바꿔 파생상태로 사용도 가능

atom 으로 고유 key 값과 initial-state 를 지정한다

selector 를 사용해 다른 값을 파생상태로 사용도 가능하다

import { useRecoilState } from "recoil";
import { summaryState } from "./utils/atoms";

export default function Test() {
  const [summary, setSummary] = useRecoilState(summaryState);

  const onPlus = () => {
    setSummary((current) => (current += 1));
  };

  return (
    <div>
      <h2>{summary}</h2>
      <button onClick={onPlus}>+++</button>
    </div>
  );
}

사용시에는 매우 간단하게 useState() 처럼 사용이 가능하다!

---

Zustand

zustand 는 독일어로 상태 라는 뜻이다.

여태 소개한 다른 라이브러리보다 가벼우며 쓰기도 매우 편한 축에 속한다.

코드를 먼저 알아보자

// util/store.ts

import { create } from "zustand";

interface IStore {
  count: number;
  increment: () => void;
}

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

// test.tsx
import { useStore } from "./utils/store";

export default function Test() {
  const { count, increment } = useStore();

  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+++</button>
    </div>
  );
}

다른 라이브러리 처럼 main.tsx 에 Provider 같은걸 걸지 않아도 된다 !

---

마치며

zustand 가 생각보다 매우 가볍고 간단해서 맘에 들었다.

다음 프로젝트 할 때 써봐야겠다.

Redux 도 사용하는 곳이 많아 제대로 배워야 하는데 은근 어렵더라