[typescript] 타입스크립트와 Redux 상태 관리의 대안적인 접근 방법

14 Dec 2023

typescript

Redux는 React 애플리케이션의 상태 관리를 위한 인기 있는 라이브러리 중 하나이다. 그러나 Redux를 사용할 때 많은 보일러플레이트 코드를 작성해야 하며, 타입스크립트를 통합하여 사용하면 코드가 더욱 복잡해질 수 있다. 이러한 이유로 개발자들은 Redux 대신 다른 상태 관리 라이브러리를 찾거나, Redux의 대안적인 패턴을 고려하게 된다.

대안 1: MobX

MobX는 간단한 API와 직관적인 개념으로 상태 관리를 가능하게 하는 라이브러리이다. MobX는 Redux와 비교하여 더 적은 보일러플레이트 코드를 필요로 하며, 타입스크립트와의 통합이 더욱 쉽다.

MobX에서는 데코레이터를 사용하여 스토어, 상태, 액션을 정의할 수 있다. 이는 훨씬 더 명확하고 가독성이 높은 코드를 작성할 수 있게 해준다.

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

class TodoStore {
  @observable todos = [];

  constructor() {
    makeObservable(this);
  }

  @action
  addTodo(todo) {
    this.todos.push(todo);
  }
}

대안 2: Zustand

Zustand는 Redux와 비슷한 상태 관리 라이브러리이지만, 더 간단한 API를 제공한다. 이 라이브러리는 Hooks를 사용하여 상태를 관리하며, 타입스크립트와의 통합이 원활하다.

import create from 'zustand';

const useStore = create((set) => ({
  todos: [],
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
}));

이 외에도 Recoil, EasyPeasy, Valtio 등의 라이브러리들이 Redux의 복잡성을 피하고 타입스크립트와 더욱 원활하게 통합할 수 있는 다양한 대안적인 상태 관리 방법을 제공한다.

Redux는 여전히 매우 강력한 도구이며, 프로젝트의 복잡도나 요구사항에 따라 적합한 도구를 선택하는 것이 중요하다. 그러나 Redux보다 좀 더 간단하고 타입스크립트와의 통합이 용이한 상태 관리 도구를 찾는다면, 여러 가지 대안을 고려해볼 가치가 있다.

대안 1: MobX

대안 2: Zustand

참고 자료