[React] 상태 관리 라이브러리에 대한 고찰 (feat. redux-tookit, recoil, zustand, jotai)

프로그래밍/React JS

[React] 상태 관리 라이브러리에 대한 고찰 (feat. redux-tookit, recoil, zustand, jotai)

용뇽 2024. 3. 25. 22:16

📖 들어가며

이번 포스팅에서는 React에서 사용되는 상태관리 라이브러리에 대해서 각각의 특징과 개인적인 견해가 들어가 있습니다.

현재 포스팅에서 다룰 주요 네 가지 라이브러리입니다.

react-redux & redux-toolkit
recoil
zustand
jotai

React에서 상태 관리 라이브러리와 함께 개발을 하다 보면 위에서 언급한 네 가지 라이브러리 중 하나쯤은 분명 알고 계시리라 생각합니다.

위 이미지는 최근 1년간 네 가지 라이브러리의 NPM 동향입니다.

현재 추세로 봤을 때

1위: redux (react-redux & redux-tookit)

2위: zustand

3위: jotai

4위: recoil

위 순위로 보입니다.

그럼 간단한 코드 예제와 함께 특징을 알아보겠습니다.

Redux (react-redux & redux-toolkit)

Redux의 주요 아이디어는 전체 애플리케이션의 상태가 단일 전역 "store"에 저장되고 상태 수정은 저장소에 전달되는 "action"을 사용하여 이루어집니다.

그런 다음 저장소는 이러한 작업을 기반으로 상태를 업데이트하고 이를 필요로 하는 React 구성 요소에 업데이트된 상태를 제공합니다.

이 아키텍처를 사용하면 복잡한 애플리케이션의 상태를 더 쉽게 관리할 수 있으며 애플리케이션의 동작을 예측 가능하고 쉽게 디버깅할 수 있습니다.

Redux는 Flux 패턴을 기반으로 동작하는 전역 상태 관리 라이브러리입니다.

여기서는 redux-toolkit을 기준으로 알아보겠습니다.

redux-toolkit을 기준으로 알아보는 이유는 redux 공식문서에서도 redux-toolkit을 추천하고 있고, 기존의 redux의 문제점을 보완하면서 효율적인 redux 개발을 위한 라이브러리이기 때문입니다.

기존의 문제점

Redux 스토어의 구성이 복잡함
Redux로 유용한 작업을 수행하기 위해서는 많은 패키지가 추가로 필요함
불필요하게 많은 보일러플레이트 코드

redux-tookit으로 작성한 counter 기능을 하는 코드 예제입니다.

redux는 아래와 같이 Provider로 컴포넌트를 감싸준 뒤 store를 연결할 수 있습니다.

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { store } from './store';
import { Provider } from 'react-redux';

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

이후, 아래와 같이 slice를 생성하여 reducer를 작성할 수 있습니다.

//features/counter/countSlice.tsx
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';

export interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

//store.ts
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

export const store = configureStore({
  reducer: { counter: counterReducer },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

위와 같이 코드를 작성한 뒤에, 아래와 같이 사용할 수 있습니다.

// App.tsx
import './App.css';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from './store';
import { decrement, increment } from './features/counter/counterSlice';

function App() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

  const onIncrementButtonClick = () => dispatch(increment());

  const onDecrementButtonClick = () => dispatch(decrement());

  return (
    <>
      <h1>리액트 상태 관리 라이브러리 예제</h1>
      <div className="card">
        <button onClick={onIncrementButtonClick}>Increment value</button>
      </div>
      <span>{count}</span>
      <div className="card">
        <button onClick={onDecrementButtonClick}>Decrement value</button>
      </div>
    </>
  );
}

export default App;

특징 🧐

간단한 counter 기능을 하는 코드를 작성하는 데 있어서 그래도 코드량이 많은 것을 볼 수 있습니다.

대신에 상태 관리 라이브러리 중 redux가 가장 역사가 오래되었고, redux에 영감을 받아 파생된 상태 관리 라이브러리들이 존재합니다.

이 뜻은 그만큼 검증된 상태 관리 라이브러리이고, redux로 개발할 때 참고 자료가 정말 많습니다.

하지만 Redux 자체의 개념을 이해하는 데 러닝 커브는 상대적으로 높습니다.

대신, Flux 패턴을 이해하는 데 많은 도움이 된다고 생각합니다.

그리고 Redux-toolkit 역시 Redux의 기본을 알아야 효과적으로 잘 사용할 수 있다고 생각합니다.

또한, redux-toolkit에 RTK-query(서버 상태 관리 라이브러리)도 내장되어 있기 때문에 별도의 설치 없이 서버 데이터를 캐싱하는 데에 있어서 redux와 잘 호환이 됩니다.

하지만 반대로 생각해 보면 서버 데이터에 대한 상태 관리가 필요 없을 때에는 패키지 용량만 불필요하게 증가하는 꼴이 되어버리죠.

Redux 자체가 다른 상태 관리 라이브러리에 비해서 패키지 용량이 클뿐더러, 또 이러한 단점을 개선한 라이브러리들이 등장하면서 최근 동향으로 봤을 때, redux로 작성된 코드들에서 redux를 걷어내고 있는 추세인 것 같습니다.

그리고 빼놓을 수 없는 큰 장점 중 하나는 redux-dev-tools를 통해서 상태 관리의 디버깅에 있어서 매우 편리합니다.

npm에서 확인한 결과로는 용량은 5.51MB를 가지고 있고, 최근 배포는 4일 전에 진행된 것을 확인할 수 있습니다.

즉, 용량은 상대적으로 크고, 유지보수는 꾸준히 되고 있다는 걸로 해석할 수 있겠네요.

간단하게 정리해보면 아래와 같습니다.

Redux는 충분히 강력한 상태 관리 라이브러리다. (middleware, devTools 등)
참고자료가 많다.
러닝커브가 높다.
redux-toolkit을 사용해도 코드량이 redux에 비해 적어진 것이지 다른 라이브러리들에 비해 상대적으로 많다.
Redux의 단점을 걷어낼 수 있는 상태 관리 라이브러리들이 등장했다.

Recoil

Recoil은 FaceBook(현 Meta)에서 발표한 React를 위한 상태 관리 라이브러리입니다.

React를 개발한 기업에서 개발하는 React를 위한 라이브러리이기 때문에 많은 개발자들이 기대감을 가졌던 라이브러리입니다.

사용 방법이 매우 간단하고 React Hooks와 유사하게 동작하여 React Hooks에 익숙하다면 러닝 커브가 매우 낮습니다.

기본적으로 상태를 원자(atom)라는 작은 단위로 취급을 하며 작은 상태를 조합하여 큰 상태를 만들고,

상태에서 다른 상태를 파생하거나 Selector와 같은 순수 함수를 제공하며 bottom-up 방식을 사용합니다.

아래는 간단한 counter 기능을 하는 코드 예제입니다.

Recoil 또한 Provider 컴포넌트로 감싸주어야 합니다.

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { RecoilRoot } from 'recoil';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

atom 상태의 단위이며, 업데이트와 구독이 가능합니다.

그래서 atom이 업데이트되면 각각 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 됩니다.

그리고 구별하기 위한 고유의 key값이 필요합니다.

// features/counter/atom.ts

import { atom } from 'recoil';

export const countState = atom<number>({
  key: 'countState',
  default: 0,
});

사용하는 곳에서는 useState와 같은 방식으로 useRecoilState를 통해서 상태를 업데이트해줄 수 있습니다.

// App.tsx
import './App.css';
import { useRecoilState } from 'recoil';
import { countState } from './features/counter/atom';

function App() {
  const [count, setCount] = useRecoilState(countState);

  const onIncrementButtonClick = () => setCount((count) => count + 1);

  const onDecrementButtonClick = () => setCount((count) => count - 1);

  return (
    <>
      <h1>리액트 상태 관리 라이브러리 에제</h1>
      <div className="card">
        <button onClick={onIncrementButtonClick}>Increment value</button>
      </div>
      <span>{count}</span>
      <div className="card">
        <button onClick={onDecrementButtonClick}>Decrement value</button>
      </div>
    </>
  );
}

export default App;

특징 🧐

매우 적은 코드로 전역 상태로 관리할 수 있음을 확인할 수 있습니다.

그리고 직관적인 코드로 인해서 복잡한 로직에 대해서도 가독성을 크게 가져갈 수 있다고 생각합니다.

위 예제에서는 atom만 사용했지만 recoil의 selectors를 이용해서 atom에 대한 파생된 상태를 만들 수도 있습니다.

또한, 비동기 데이터에 관련해서도 관리가 가능합니다.

단점으로는 redux-dev-tools와 같은 디버깅 툴이 완벽하게 지원되지 않는 점이 존재합니다.

하지만 현재 관리가 잘 되고 있지 않습니다.

저 또한 redux를 사용한 이후 recoil에 대한 사용 경험이 매우 좋아서 recoil의 앞으로의 방향성에 대해서 매우 기대했습니다.

2020년에 출시했지만 버전도 매우 낮을뿐더러, 마지막 업데이트가 1년 전입니다.

이러한 이유로 recoil의 최근 다운로드 횟수도 줄어들고 있습니다.

주요 원인으로 recoil의 초기 설계부터 개발까지 담당한 메인 개발자가 정리 해고를 당한 영향이 큰 것 같습니다.

recoil의 역사가 오래된 것도 아니라, 참고 자료가 부족한 상황입니다.

이러한 상황에서 업데이트가 되지 않으니 사실상 앞으로 recoil을 선택할 이유는 매우 적다고 생각됩니다.

실제로 이후 아래에서 설명할 jotai에게 밀리는 중에 있습니다.

Zustand

Zustand는 독일어로 '상태'를 의미한다고 하네요.

현재 떠오르고 있는 상태 관리 라이브러리 중 하나입니다.

간소화된 Flux 패턴을 사용하며 작고 빠르고 확장 가능한 상태 관리 라이브러리입니다.

다른 React 상태 관리 라이브러리는 스토어를 주입할 때 Context API를 사용하지만 Zustand는 클로저를 활용하여 스토어 내부 상태를 관리함으로써 특정 라이브러리에 종속적이지 않습니다

아래는 counter 기능을 하는 코드 예제입니다.

아래와 같이 devtools로 감싸주면 redux-dev-tools를 활용하여 디버깅이 가능합니다.

// features/counter/store.ts
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

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

export const useCountStore = create<ICountStore>()(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
  }))
);

// App.tsx
import './App.css';
import { useCountStore } from './features/counter/store';

function App() {
  const { count, increment, decrement } = useCountStore();

  return (
    <>
      <h1>리액트 상태 관리 라이브러리 에제</h1>
      <div className="card">
        <button onClick={increment}>Increment value</button>
      </div>
      <span>{count}</span>
      <div className="card">
        <button onClick={decrement}>Decrement value</button>
      </div>
    </>
  );
}

export default App;

특징 🧐

Zustand는 Provider로 컴포넌트를 감싸주지 않아도 사용이 가능합니다.

또한, 상태와, 상태를 변경하는 액션을 정의하고, 리턴 받은 hook을 어느 컴포넌트에서나 import 하여 원하는 대로 사용할 수 있습니다.

Redux와 같은 Flux 패턴으로 동작하는데, 매우 적은 코드양으로 개발이 가능합니다.

NPM 기준 용량은 327kb로 매우 적습니다.

최근 업데이트도 2일 전이고 아주 활발하게 업데이트가 진행되고, 주간 다운로드 횟수도 높은 것을 볼 수 있습니다.

Zustand가 Redux와 ContextAPI 보다 나은 이유를 아래와 같이 설명하고 있습니다.

매우 간단함.
React Hook을 사용하여 상태를 사용하기 때문에 추가적인 Hook이 필요 없음
Provider로 감싸지 않아도 되기 때문에 구조가 더 단순함.
보일러 플레이트 감소
상태가 변경될 때만 컴포넌트를 렌더링 ➡️ 불필요한 렌더링 감소
중앙 집중식, 액션 기반 상태 관리 ➡️ 상태 관리를 더 체계적이고 일관성 있게 만들어 줌

Flux 패턴에 익숙하다면 적은 용량과 적은 코드로 빠르게 개발이 가능한 Zustand의 사용을 고려해보지 않을 수가 없겠네요.

Jotai

Jotai는 Recoil에 영감을 받아서 등장한 상태 관리 라이브러리며 현재 떠오르고 있는 라이브러리입니다.

그래서 Jotai 또한 atomic 패턴을 따르고, React를 위한 상태 관리 라이브러리이며 React Hooks와 매우 유사하게 동작합니다.

아래도 역시 counter 기능을 하는 코드 예제입니다.

// features/counter/atom.ts
import { atom } from 'jotai';

export const countAtom = atom(0);

// App.tsx
import './App.css';
import { useAtom } from 'jotai';
import { countAtom } from './features/counter/atom';

function App() {
  const [count, setCount] = useAtom(countAtom);

  const onIncrementButtonClick = () => setCount((count) => count + 1);

  const onDecrementButtonClick = () => setCount((count) => count - 1);

  return (
    <>
      <h1>리액트 상태 관리 라이브러리 에제</h1>
      <div className="card">
        <button onClick={onIncrementButtonClick}>Increment value</button>
      </div>
      <span>{count}</span>
      <div className="card">
        <button onClick={onDecrementButtonClick}>Decrement value</button>
      </div>
    </>
  );
}

export default App;

특징 🧐

코드를 보면 Recoil 그리고 React Hooks와 매우 유사합니다.

또한, Recoil과 다른 점은 atom 작성 시 key가 필요하지 않고, Provider 또한 필요하지 않습니다.

Provider 관련해서는 필요에 따라 사용하여 감싸줄 수 있습니다.

추가적으로 atom의 callback 함수로 get과 set을 인자로 받아서 파생된 상태를 만들 수 있습니다.

또한, SSR, 비동기, Family 등 다양한 유틸리티가 지원됩니다.

NPM을 확인해 보면 매우 작은 크기를 가지고 있고 꾸준히 업데이트도 잘 되고 있습니다.

주간 다운로드 역시 Recoil 보다 약 30만 회 정도 높은 것으로 확인됩니다.

버전을 보면 벌써 2+ 버전까지 업데이트가 되었네요.

하지만 Jotai 역시 참고 자료가 방대하지 않고, 공식적인 DevTools 지원이 되지 않습니다.

그럼 어떤 라이브러리를 선택해야 할까?🧐

개인적인 견해로 최근 동향을 살펴봤을 때,

Redux ➡️ Zustand

Recoil, ContenxtAPI ➡️ Jotai

정도로 대체되고 있는 것 같습니다.

대체되는 라이브러리들의 특징을 살펴보면 매우 경량화된 크기의 라이브러리로,

최소화된 코드로 기존의 웬만한 기능들을 대체할 수 있고 꾸준히 관리되고 업데이트되기 때문에 많은 관심을 받는 것 같습니다.

그리고 추가적으로 Typescript를 지향한다는 특징도 있어요.

하지만 "요즘 대세다, 유행이다, 최신 기술이다" 이런 흐름에 휩쓸리는 것이 아니라 프로젝트 특성에 맞게 잘 사용해야 하는 것은 분명하다고 생각합니다.

예를 들어, 대규모 프로젝트에서 많은 기능을 요구하여 참고 자료가 많아야 하는 것을 중요하게 생각하면 Redux를 선택할 수도 있고요.

대신 반대로 생각해보면, 사람들에게 관심받는 이유와 우상향인 추세에도 분명한 이유가 있습니다.

개인적으로는 평소 Recoil을 사용할 상황에는 Jotai를 선택하게 될 것 같네요.

또한, 현재 저는 redux-toolkit에 익숙하지만 특별한 이유가 없다면 이후에 Zustand를 경험해보고 싶네요.

마지막으로 간단하게 표로 비교해보겠습니다.

2024년 3월 25일 기준입니다.

비교	redux-toolkit	Recoil	Zustand	Jotai
크기 (Unpacked Size)	5.51MB	2.21MB	327KB	430KB
주간 다운로드 수	약 330만 회	약 60만 회	약 320만 회	약 90만
유지보수	좋음	느림	좋음	좋음
깃허브 start	10.3k	19.4k	41.5k	17k
복잡도	중간	낮음	낮음	낮음
참고자료	높음	낮음	양호	낮음
Provider 필요	필요함	필요함	필요없음	선택적
DevTools 지원	⭕	❌	⭕	❌

상태 관리 라이브러리들에 대한 세대교체가 발생하는 걸까요?

매우 흥미롭습니다.

이럴수록 저는 개발 편의성, 생산성 모두 증가하기 때문에 선택지가 넓어지고 좋은 입장인 것 같습니다 :)

각 라이브러리의 깊이 보다는 대표적인 특징에 대해서만 훑어봤습니다.

부정확한 정보나, 추가하면 좋은 내용이 있으면 댓글 남겨주세요. 😄

참고 문헌:

저작자표시 비영리 변경금지