[typescript] Redux 상태 관리에서의 타입스크립트와 데이터 가공 방법

14 Dec 2023

typescript

Redux는 JavaScript 애플리케이션의 상태를 관리하는 데 유용한 도구입니다. 그러나 Redux를 사용하여 상태를 관리할 때 타입스크립트와 함께 사용하면 코드의 안정성과 가독성을 높일 수 있습니다. 이번 포스트에서는 Redux와 타입스크립트를 함께 사용하는 방법과 데이터 가공 방법에 대해 살펴보겠습니다.

타입스크립트로 Redux 설정하기

먼저 Redux에 타입스크립트를 적용하는 방법을 알아보겠습니다. Redux를 사용할 때 action, reducer, store에 대한 타입을 명확히 지정하여 오류를 줄일 수 있습니다.

// actions.ts
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

interface IncrementAction {
  type: typeof INCREMENT;
}

interface DecrementAction {
  type: typeof DECREMENT;
}

export type ActionTypes = IncrementAction | DecrementAction;

// reducers.ts
import { ActionTypes, INCREMENT, DECREMENT } from './actions';

interface CounterState {
  count: number;
}

const initialState: CounterState = {
  count: 0,
};

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

export default counterReducer;

위의 예시처럼 타입스크립트를 이용하여 action과 reducer에 대한 강력한 타입 지정이 가능합니다.

데이터 가공 방법

Redux와 타입스크립트를 사용하여 상태를 가공하는 방법에 대해 알아봅시다. 예를 들어, Redux store에서 특정 데이터를 가져와서 필요한 형태로 가공하는 작업을 할 수 있습니다.

// selectors.ts
import { RootState } from './store';

export const getFormattedCount = (state: RootState): string => {
  const count = state.counter.count;
  return `The count is: ${count}`;
};

위의 예시에서는 getFormattedCount 함수를 사용하여 store에서 가져온 count를 원하는 형태로 가공하여 반환하고 있습니다.

이와 같이 Redux와 타입스크립트를 함께 사용하면, 코드의 가독성과 유지보수성을 높일 수 있습니다.

Redux와 타입스크립트를 사용하여 데이터를 관리하는 방법에 대해 알아보았습니다. 이를 통해 코드의 안정성을 높이고, 데이터를 보다 안전하게 다룰 수 있게 되었습니다. 위에서 언급된 예시 코드를 통해 보다 실용적인 방법을 찾아볼 수 있을 것입니다.

타입스크립트로 Redux 설정하기

데이터 가공 방법

참고 자료