Redux 공식문서 들여다보기_타입스크립트와 사용할 때_2회

Daniel Woo·2022년 3월 25일
0
post-thumbnail

표준 Redux Toolkit 프로젝트 준비하기

Redux Toolkit과 React Redux를 사용하는 전형적인 Redux 프로젝트를 진행하는 것으로 가정한다.

  • Redux Toolkit(RTK)
    RTK는 모던한 리덕스 패턴을 작성할 때 표준이되는 방식이다. 이미 타입스크립트로 작성된 RTK는 API와 더불어 타입스크립트 사용 환경에서 좋은 경험을 줄 것이다.

  • React Redux
    리액트 리덕스는 NPM에서 @types/react-redux typedefs package라는 고유의 타입 정의로 분리되어 있다. 그래서 타입 정의는 라이브러리와 함께 자동적으로 설치될 것이다. 만약 그렇지 않다면, 수동적으로 설치해야한다.

    react-redux 타입 정의
    ex. npm install @types/react-redux or yarn add @types/react-redux

    리덕스+타입스크립트 템플릿 옵션으로 CRA세팅을 한다면 위의 과정은 자동으로 세팅되므로 추천!!

    redux+typescritp 템플릿 CRA세팅

    npx create-react-app my-app --template redux-typescript
    
    # or
    
    yarn create react-app my-app --template redux-typescript

RootState와 Dispatch 타입 정의하기

configureStore을 사용하면 어떤 추가적인 코드작성도 필요하지 않다. 그럼에도 우리는 필요에 따라 사용될 수 있게 RootStateDispatch의 타입을 추출할 상황이 있을 것이다. 이 두가지의 타입 추론은 store로 부터 온다. 우리가 state slice나 수정된 미들웨어 세팅을 추가하더라도 올바르게 업데이트 되는 것이다.

즉, 알맞은 타입을 동적으로 지정하기 위해 추가적인 세팅을 하는 것이다.

타입이기 때문에 store 파일로부터 곧바로 import하거나 export해도 안전하다.

생각해보기

//  ReturnType<Type> 함수 Type의 반환 타입으로 구성된 타입을 생성
// typeof 뒤에 오는 값의 타입 검사 및 반환

// type of가 store.getState의 타입을 동적으로 받아옴
// <typeof store.getState> 자체가 타입을 반환하는 함수이기 때문에 ReturnType사용
export type RootState = ReturnType<typeof store.getState>;

// store.dispatch의 타입을 동적으로 받아옴
export type AppDispatch = typeof store.dispatch;

타입을 가진 Hooks 설정하기

RootStateAppDispatch 타입은 이제 다른 컴포넌트에 사용될 수 있다. 하지만, 잦은 사용이 예상되는 useDispatchuseSelector에 매 번 위의 타입을 지정하는 것은 그리 효율적이지 않다. 그렇기 때문에 미리 타입 정의를 해둔 버전을 만들어 놓는 것이 사용하기 편하고, 효율적일 것이다. 타입 설정의 더 자세한 이유는 다음과 같다.

  • useSelector
    매번 (state: RootState)의 타입 설정을 하는 시간을 아낄 수 있다.
  • useDispatch
    기본 Dispatch 타입은 thunks와 같은 미들웨어를 인지하지 못한다. thunks를 올바르게 dispatch하기 위해선 useDispatch를 기반으로 세부적으로 커스텀된 AppDispatch 타입을 사용해야 한다. 이후에 thunk 미들웨어 타입을 포함한 store로부터 import된다.
    사전에 Appdispatch 타입을 설정한 useDispatch인 useAppDispatch는 일종의 custom hook이다. 미리 타입을 설정했기 때문에 혹시 필요한 상황에서 타입 설정 누락을 방지할 수 있다.

useAppDispatchuseAppSelector는 타입이 아닌 변수로 설정되기때문에 store 설정 파일이 아닌, 별도의 hooks 파일에 분리해서 정의하는 것이 중요하다. 이 설정으로 원하는 컴포넌트 어디서든 이 hooks를 사용할 수 있다. 혹시 있을 수 있는 import 충돌 가능성을 피하는 방법이기도 하다.


참고 자료: Redux 공식문서 - Usage with TypeScirpt

profile
모두가행복한세상을만들고싶은사람

0개의 댓글