클라이언트 상태 관리

개발 경험 및 효율성 증대를 위해 클라이언트와 비동기 및 서버 상태 관리를 분리하여 개발하고, 클라이언트 상태 관리를 맡아주는 라이브러리 설치하려고 함.

클라이언트 상태 관리 라이브러리로 Zustand를 골랐음. 사실 최대한 클라이언트 전역 상태 관리 라이브러리를 사용하지 않으려는 쪽으로 가려다 선회해 주스탄드로 결정함.

클라이언트 상태 관점에서 로컬 상태는 useState, 전역 상태는 Zustand로 관리할 것임. 비동기적 상태 관리는 기존 상태 관리 라이브러리로는 부족해 리액트쿼리를 쓸 것임.

Zustand

A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like.

작고, 빠르고, 간소하지만 확장 가능한 상태 관리 솔루션. 훅에 기반한 코드. boilerplatey 하지 않고, 강한 의견을 가진 코드는 아니지만, Flux 패턴을 따라 정확하고, 명확한 컨벤션을 지닌 라이브러리.

Zustand 고른 이유

1. 경량성
   정말 가벼움. 성능도 성능이고, 패키지 무게가 persist, redux-devtool 등 내장 돼있어도 573KB 밖에 안됨, toolkit은 14.5MB 정도임.
   MUI도 무거워서 안사용하려다가 일단 사용하는 쪽으로 간 상태라 이 정도 무게면 없다고 생각해도 무방해서 설치해도 된다 판단했음. Context API도 무거워서 탈락.(보일러 플레이트 등)
2. 리덕스의 아들
   주스탄드는 리덕스를 기반으로 개발되었기 때문에 Flux 패턴을 오마주하고 있고 리덕스의 기능을 일부 사용할 수 있음.(Store, MiddleWare, DevTools 등)
   즉, 리덕스의 기반을 그대로 따르고 있어서 개념이 익숙해 낮은 러닝커브로 빠르게 개발할 수 있어 고름.
3. 단순한 사용성
   더 적은 코드로 상태를 관리할 수 있어 프로젝트의 복잡성을 줄이고, 리덕스의 번거로운 설정과 액션 작성을 최소화. 사용성 측면에서 빠르게 구현하면서도 강력한 상태 관리를 제공.
4. 빠른 생태계 성장
   2023년 들어서부터 엄청난 성장을 이뤄 Recoil을 추월한 것을 물론 리덕스와 비교했을때 성장비율이 훨씬 높아 점점 생태계가 확장되고 있음. 예측해보건대 Zustand가 상태 관리 라이브러리로서 리덕스와 나란히 할 거 같기에 고름.

Zustand와 Redux Toolkit 비교

Redux Toolkit

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

const store = configureStore({
  reducer: counterSlice.reducer,
});

// 사용 예시
const ExampleComponent = () => {
  const { value } = store.getState().counter;
  return (
    <div>
      <p>Count: {value}</p>
      <button onClick={() => store.dispatch(counterSlice.actions.increment())}>
        Increment
      </button>
      <button onClick={() => store.dispatch(counterSlice.actions.decrement())}>
        Decrement
      </button>
    </div>
  );
};

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 })),
}));

// 사용 예시
const ExampleComponent = () => {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};