[TIL] 11/4 프론트엔드 심화1 - 모르는거 정리

리액트 리덕스 정리본

[React] Redux 사용하기 (feat. TypeScript)

 

 

프로젝트 코드의 일부

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer/reducer";

const store = configureStore({ // 스토어 객체 생성
    reducer
})

// 스토어의 상태 타입 정의
export type RootState = ReturnType<typeof store.getState>

// 디스패치 타입 정의
export type AppDispatch = typeof store.dispatch;

export default store;

import { useSelector, useDispatch, TypedUseSelectorHook } from "react-redux";
import { AppDispatch, RootState } from '../store';

// 커스텀 훅
export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector
export const useTypedDispatch = () => useDispatch<AppDispatch>();

 

 

궁금증1. 왜 useDispatch, useSelector 훅을 그대로 쓰지 않고 커스텀 훅을 만들어 쓰는가?

 

-> 타입의 안전성을 보장하기 위해

기본적으로 useDispatch 와 useSelector 는 타입 정보를 갖고 있지 않아서 타입스크립트가 dispatch 의 액션 타입이나 selector 가 조회할 state 의 타입을 알지 못한다. 커스텀 훅을 만들면 타입스크립트가 정확한 타입을 추론할 수 있도록 도와준다. 

 

- useSelector 커스텀 훅

 

TypedUsedSelectorHook 은 useSelector 훅에 특정 상태 타입을 적용하기 위해 타입스크립트에서 사용하는 타입이다.

<RootState> 는 useSelector 의 인자로 들어올 조회할 state 의 타입

 

이렇게 정의해놓은 커스텀 훅을 사용하면, useSelector 와 동일하게 동작하지만 반환되는 state 의 타입이 RootState 로 고정되므로 타입스크립트가 타입을 알 수 있고 더 편하고 안전하게 사용할 수 있다. 

// 기존 방식
const value = useSelector((state: RootState) => state.someReducer.value);

// 커스텀 사용시
const value = useTypedSelector(state => state.someReducer.value);

 

 

- useDispatch 커스텀 훅

 

useSelector 와 같이 dispatch 함수가 받을 수 있는 액션을 AppDispatch 타입으로 고정시켜 두어서 타입스크립트가 dispatch 할 때 어떤 액션을 받을 수 있는지 명확하게 알 수 있다.

// 기존 방식
const dispatch = useDispatch<AppDispatch>();
dispatch(someAction()); 

// 커스텀 훅 사용시
const dispatch = useTypedDispatch();
dispatch(someAction());