[typescript] 타입스크립트를 사용한 Redux 상태 관리의 개발 경험 공유

14 Dec 2023

typescript

Redux는 React 애플리케이션에서 상태를 효율적으로 관리하기 위한 라이브러리로, 타입스크립트와 함께 사용하면 장기적으로 유지보수하고 확장할 수 있는 안정적인 코드를 작성할 수 있습니다. 이번 글에서는 타입스크립트를 사용하여 Redux를 효과적으로 구현하는 방법과 그 경험을 공유하고자 합니다.

Redux와 타입스크립트 소개

Redux는 상태 관리를 위한 예측 가능한 컨테이너로, 타입스크립트와의 호환성이 우수합니다. 타입 시스템을 이용하여 상태, 액션, 리듀서 등을 엄격하게 정의하면 코드의 안정성과 가독성이 향상됩니다.

타입스크립트와 함께 Redux 시작하기

먼저 패키지를 설치합니다.

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

그리고 필요한 타입 정의를 위해 types.d.ts 파일을 생성합니다.

// types.d.ts
import { RootState } from './store';

declare module 'react-redux' {
  interface DefaultRootState extends RootState {}
}

Redux 상태 및 액션 타입 정의

타입스크립트를 이용하여 Redux 상태와 액션 타입을 정의합니다.

// types.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export type TodoState = {
  todos: Todo[];
};

export enum TodoActionTypes {
  ADD_TODO = 'ADD_TODO',
  TOGGLE_TODO = 'TOGGLE_TODO',
}

interface AddTodoAction {
  type: TodoActionTypes.ADD_TODO;
  payload: string;
}

interface ToggleTodoAction {
  type: TodoActionTypes.TOGGLE_TODO;
  payload: number;
}

export type TodoAction = AddTodoAction | ToggleTodoAction;

액션 및 리듀서 정의

Redux 액션 및 리듀서를 타입스크립트로 정의합니다.

// actions.ts
import { TodoActionTypes, TodoAction } from './types';

export const addTodo = (text: string): TodoAction => ({
  type: TodoActionTypes.ADD_TODO,
  payload: text,
});

export const toggleTodo = (id: number): TodoAction => ({
  type: TodoActionTypes.TOGGLE_TODO,
  payload: id,
});

// reducers.ts
import { TodoActionTypes, TodoState, TodoAction } from './types';

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

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

export default todoReducer;

컴포넌트에서 Redux 사용하기

마지막으로, 리덕스 상태를 컴포넌트에서 사용하는 방법입니다.

// TodoList.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from './store';
import { addTodo, toggleTodo } from './actions';

const TodoList: React.FC = () => {
  const todos = useSelector((state: RootState) => state.todoState.todos);
  const dispatch = useDispatch();

  const handleAddTodo = (text: string) => {
    dispatch(addTodo(text));
  };

  const handleToggleTodo = (id: number) => {
    dispatch(toggleTodo(id));
  };

  // render todo list
};

export default TodoList;

결론

타입스크립트와 Redux를 함께 사용하면 안정적이고 유연한 코드를 작성할 수 있습니다. 타입 시스템을 활용하여 Redux의 강력함을 더욱 확대시킬 수 있으므로, 프로젝트에 Redux를 도입할 때 타입스크립트와 함께 사용하는 것을 권장합니다.

이상으로 타입스크립트를 사용한 Redux 상태 관리에 대한 개발 경험을 공유하였습니다. 추가적인 질문이 있으시다면 언제든 연락 부탁드립니다.

목차

Redux와 타입스크립트 소개

타입스크립트와 함께 Redux 시작하기

Redux 상태 및 액션 타입 정의

액션 및 리듀서 정의

컴포넌트에서 Redux 사용하기

결론

참고 자료