[typescript] Redux 상태 관리에서의 타입스크립트 활용 팁

14 Dec 2023

typescript

Redux 상태 관리와 타입스크립트의 조합은 현대적인 웹 애플리케이션 개발에서 흔히 사용됩니다. 타입스크립트를 효과적으로 활용하면 Redux 코드를 더 안정적이고 안전하게 만들 수 있습니다. 이번 포스트에서는 Redux와 타입스크립트를 함께 사용할 때 유용한 팁을 소개하겠습니다.

1. 타입 선언

Redux 애플리케이션에서는 상태(State)와 액션(Action)에 대한 타입을 명확히 선언하는 것이 중요합니다. 타입 선언을 통해 컴파일 시 타입 에러를 사전에 방지할 수 있습니다.

예를 들어, 타입스크립트의 interface 또는 type 키워드를 사용하여 상태와 액션의 타입을 정의할 수 있습니다.

interface AppState {
  counter: number;
  isLoading: boolean;
}

type AppAction = { type: 'INCREMENT_COUNTER' } | { type: 'DECREMENT_COUNTER' };

2. 리듀서(Reducer)에 타입 적용

리듀서는 초기 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다. 타입스크립트를 사용하면 리듀서에 대한 타입을 명시할 수 있습니다.

const initialState: AppState = {
  counter: 0,
  isLoading: false,
};

const appReducer = (state: AppState = initialState, action: AppAction): AppState => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT_COUNTER':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
};

3. 액션 생성자(Action Creator) 타입화

액션 생성자는 액션 객체를 반환하는 함수입니다. 이때 액션 객체의 타입을 명시적으로 정의하여 반환하도록 하는 것이 바람직합니다.

const incrementCounter = (): AppAction => ({ type: 'INCREMENT_COUNTER' });
const decrementCounter = (): AppAction => ({ type: 'DECREMENT_COUNTER' });

4. 컴포넌트와 연결

Redux와 타입스크립트를 사용할 때 connect 함수 또는 useSelector, useDispatch 훅을 사용하여 컴포넌트와 상태 및 액션을 연결할 때도 타입을 명시할 수 있습니다.

import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { incrementCounter, decrementCounter, AppAction, AppState } from './redux';

interface Props {
  counter: number;
  increment: () => void;
  decrement: () => void;
}

const CounterComponent = ({ counter, increment, decrement }: Props) => {
  // 컴포넌트 코드
};

const mapStateToProps = (state: AppState) => ({
  counter: state.counter,
});

const mapDispatchToProps = (dispatch: Dispatch<AppAction>) => ({
  increment: () => dispatch(incrementCounter()),
  decrement: () => dispatch(decrementCounter()),
});

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

결론

타입스크립트를 사용하여 Redux 상태 관리를 할 때, 타입을 명시적으로 선언하고 관련 함수 및 컴포넌트에 적용함으로써 코드의 안정성과 가독성을 향상시킬 수 있습니다. Redux와 타입스크립트를 효과적으로 결합하여 안정적이고 확장 가능한 애플리케이션을 만들기 위해 이러한 팁을 활용해 보시기 바랍니다.

참고 문헌: