Learn 상태 관리 라이브러리

상태 관리 라이브러리

ContextAPI, Redux, MobX, SWR는 상태 관리 라이브러리 혹은 패턴으로 React 프레임워크에서 사용되는 대표적인 상태 관리 방법이다.(State)

Context API

Context API는 React에서 기본적으로 제공하는 상태 관리 방법 중 하나이다. Context API를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다.
이를 통해 props를 이용한 데이터 전달이 필요 없어지므로, 중간 단계의 컴포넌트에서 별도의 코드 없이 데이터를 전달할 수 있다는 장점이 있다.

아래는 간단한 예시 코드

import React, { createContext, useState } from 'react';

export const CounterContext = createContext();

const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <CounterContext.Provider value={{ count, increment, decrement }}>
      {children}
    </CounterContext.Provider>
  );
};

export default CounterProvider;

Redux

Redux는 React에서 가장 많이 사용되는 상태 관리 라이브러리 중 하나이다. Redux는 전역 상태를 관리하는데에 사용되며, 상태를 변경하는 방법은 액션(Action)을 dispatch하는 것이다. Redux의 가장 큰 특징은 상태 변경을 예측 가능한 방식으로 처리한다는 것이다.
또한, 미들웨어(Middleware)를 이용하여 상태 변화에 대한 사전 처리를 할 수 있으며, Redux DevTools를 사용하여 상태 변화를 디버깅할 수 있다는 장점이 있다.

import { createStore } from 'redux';

const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
switch (action.type) {
  case 'INCREMENT':
    return { ...state, count: state.count + 1 };
  case 'DECREMENT':
    return { ...state, count: state.count - 1 };
  default:
    return state;
}
};

const store = createStore(counterReducer);

export default store;

MobX

MobX는 React에서 사용되는 또 다른 상태 관리 라이브러리이다. Redux와 달리 MobX는 언어 수준에서의 옵저버블 패턴을 사용한다. 상태를 업데이트하는 방법은 단순히 값을 변경하는 것으로, 특별한 액션을 디스패치할 필요가 없다.
또한, MobX는 코드를 간결하게 작성할 수 있도록 도와주며, Redux보다 더 나은 성능을 보여준다는 장점이 있다.

import { makeObservable, observable, action } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
    });
  }

  increment() {
    this.count += 1;
  }

  decrement() {
    this.count -= 1;
  }
}

export default new CounterStore();

SWR

SWR은 React에서 사용되는 상태 관리 라이브러리이다. SWR은 데이터를 가져오고 캐시하며, 필요에 따라 새로고침할 수 있는 기능을 제공한다. SWR은 서버로부터 데이터를 가져올 때 자주 사용되며, 다양한 옵션을 제공하여 사용자가 필요에 따라 데이터를 가져오고 업데이트할 수 있다는 장점이 있다.

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const Counter = () => {
const { data, error } = useSWR('/api/counter', fetcher);

if (error) return <div>Failed to load</div>;
if (!data) return <div>Loading...</div>;

return <div>Count: {data.count}</div>;
};

export default Counter;

마치며

이들은 각각의 특성과 용도가 있으며 개발자는 프로젝트의 상황과 니즈에 맞추어 적절한 상태 관리 방법을 선택해야 한다.