[typescript] 타입스크립트를 사용한 Redux 상태 관리의 예시

14 Dec 2023

typescript

Redux는 JavaScript 애플리케이션의 상태를 관리하는 데 사용되는 예측 가능한 상태 컨테이너 라이브러리입니다. 타입스크립트와 함께 Redux를 사용하면 강력한 타입 검사 기능을 활용하여 코드를 더 안정적으로 만들 수 있습니다. 이 예시에서는 타입스크립트를 사용하여 간단한 To-Do 애플리케이션의 상태를 관리하는 방법을 살펴봅니다.

프로젝트 설정

우선, Redux와 관련 라이브러리를 설치합니다.

npm install redux react-redux @types/react-redux

그리고, tsconfig.json 파일에 다음을 추가하여 Redux에 대한 타입 선언을 활성화합니다.

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "typeRoots": ["./node_modules/@types", "./custom-types"],
    "types": ["redux", "react-redux"]
  }
}

상태 정의

먼저, To-Do 애플리케이션의 상태를 정의합니다. 다음은 간단한 To-Do 항목의 형태를 나타내는 인터페이스입니다.

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: []
};

액션 정의

다음으로, 액션을 정의합니다. 액션은 상태 변경을 일으키는 객체입니다. 타입스크립트를 사용하여 액션의 타입을 정의할 수 있습니다.

enum ActionType {
  ADD_TODO = "ADD_TODO",
  TOGGLE_TODO = "TOGGLE_TODO",
}

interface AddTodoAction {
  type: ActionType.ADD_TODO;
  payload: { text: string };
}

interface ToggleTodoAction {
  type: ActionType.TOGGLE_TODO;
  payload: { id: number };
}

type Action = AddTodoAction | ToggleTodoAction;

리듀서 정의

마지막으로, 리듀서를 정의하여 실제 상태 변경을 다룹니다.

const todoReducer = (state = initialState, action: Action): TodoState => {
  switch (action.type) {
    case ActionType.ADD_TODO:
      const newTodo: Todo = {
        id: state.todos.length + 1,
        text: action.payload.text,
        completed: false
      };
      return {
        todos: [...state.todos, newTodo]
      };
    case ActionType.TOGGLE_TODO:
      return {
        todos: state.todos.map(todo =>
          todo.id === action.payload.id 
            ? { ...todo, completed: !todo.completed } 
            : todo
        )
      };
    default:
      return state;
  }
};

스토어 생성

마지막으로, 스토어를 생성하고 리액트 앱과 연결합니다.

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(todoReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

위의 예시를 따라서 Redux와 타입스크립트를 사용하여 To-Do 애플리케이션의 상태를 관리할 수 있습니다. 이를 통해 안정적이고 예측 가능한 상태 관리를 구현할 수 있습니다.

프로젝트 설정

상태 정의

액션 정의

리듀서 정의

스토어 생성

참고 자료