TypeScript로 바꿔보자3

Loa-Hands

  • 이전에 만들었던 앱을 타입스크립트로 바꿔보려한다.
  • reducer부분의 수정과, Header부분을 손봐보았다.

Reducer

  • RootState에는 HomeData와 UserData가 해당 class를 타입으로 갖고있는데, 이전에 지정해주었던 IInitalState은 null의 타입만을 허용하고 있었다. 따라서, useSelector로 해당 state를 확인했을 때, IInitalState와 RootState의 유니온타입들중 유일하게 겹쳐서 유효한 속성은 isLoading뿐이라, homeData의 값을 설정할 수 없었다.
  • 또한, 이후 하위컴포넌트에 속성으로 homeData를 보내고자 할 때, 유니온타입이 아닌 homeData타입을 갖고 갈 수 있도록, 재지정해주었다.
    5

    변경

    1

HeaderContainer

  • 기존 function으로 시작하는 컴포넌트에서, React.FC의 타입을 갖는 함수로 다시 만들어주었다.
  • useSelector에서 받아오는 state의 타입은 이전에 생성했던 RootState를 연결해준다.
  • react-redux공문을 보니, dispatch는 useDispatch를 통한 결과값이므로 별도의 타입을 지정해줄 필요가 없다하여 모두 지웠다.
    2
  • 기존 function으로 시작하는 컴포넌트에서, React.FC의 타입을 갖는 함수로 다시 만들어주었다.
  • 받아오는 속성들의 interface를 미리 구현해주었다.
  • 실행되는 dispatcher들은 실행될 때, 제너릭으로 해당 타입을 interface로 보내주도록 했다.

    처음에는 해당 메소드가 실행될 때, 해당 메소드가 생성되는 상위의 HeaderContainer에 제너릭으로 작성해야된다 생각했는데, 아니였다.

    3

@SangMin
👆 H'e'story

🚀GitHub