[typescript] Redux 상태 관리에서의 타입스크립트와 성능 최적화 방법
Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 효과적인 도구입니다. 이를 TypeScript와 함께 사용하면 코드 유지 보수성과 안정성을 높일 수 있습니다. 또한, 성능을 최적화하고자 할 때 유용한 팁도 있습니다.
1. 타입스크립트와 Redux
Redux와 TypeScript를 함께 사용할 때 가장 중요한 점은 액션(Action), 리듀서(Reducer), 스토어(Store)에 대한 타입을 명확히 정의하는 것입니다.
// 액션 타입 정의
enum ActionTypes {
INCREMENT = 'INCREMENT',
DECREMENT = 'DECREMENT'
}
// 액션 생성 함수 타입 정의
type Action = {
type: ActionTypes,
payload?: number
}
// 초기 상태 및 리듀서 함수 정의
interface CounterState {
count: number
}
const initialState: CounterState = {
count: 0
}
const counterReducer = (state: CounterState = initialState, action: Action): CounterState => {
switch (action.type) {
case ActionTypes.INCREMENT:
return { ...state, count: state.count + (action.payload || 1) };
case ActionTypes.DECREMENT:
return { ...state, count: state.count - (action.payload || 1) };
default:
return state;
}
}
2. 불필요한 리렌더링 방지
Redux 상태가 변경될 때 불필요한 리렌더링을 방지하기 위해 react-redux 라이브러리의 useSelector 훅을 사용하면 됩니다.
import { useSelector } from 'react-redux';
const CounterComponent: React.FC = () => {
const count = useSelector<RootState, number>(state => state.counter.count);
// ...
}
3. 메모이제이션을 통한 성능 최적화
Reselect 라이브러리를 사용하여 메모이제이션(memoization)을 적용하여 성능을 최적화할 수 있습니다. 해당 함수가 동일한 인수로 호출될 경우 이전에 계산된 값을 캐싱하여 재활용합니다.
import { createSelector } from 'reselect';
const selectCounter = (state: RootState) => state.counter;
const getDoubleCount = createSelector(
selectCounter,
counter => counter.count * 2
);
// 사용 예시
const doubledCount = useSelector(getDoubleCount);
Redux의 타입스크립트와 성능 최적화에 대한 내용을 적용하면 프로젝트의 안정성과 성능을 동시에 높일 수 있습니다.