React Props and Typescript

드디어 다음 포스팅을 한다..;;

이번 포스팅은 저번에 typescript를 사용한 react의 state에 대해 알아봤다면.

이번에는 props를 전달해보자.

 

이전에 부모컴포넌트에서 바로 카운터state를 prop으로 전달하고 Number 컴포넌트에서 전달받아

이를 출력하는 코드를 짜보면 

먼저 오른쪽이 기존 부모컴포넌트이다. 자식 function 컴포넌트를 import해주고 count이름으로 counter  props를 전달해준다.

이를 받은 자식 Number컴포넌트는 count를 랜더링 해주는데 이때 역시 interface로  props의 타입을 정해준다.

prop-types에서 정해주는것처럼

 

그리고서 Number: React.FunctionComponent<> 로 명명해서 이 컴포넌트가 react의 function컴포넌트 타입임을 알려주고

<> 안에 정해준 interface를 넣어주면 된다. 혹은  <{count : number}> 이렇게 direct로 써줄수도 있지만

props가 많다면 아마 가독성이 떨어질듯 하다.

 

이렇게 함으로써의 장점은 바로 prop-types를 사용했을때는 반드시 코드가 실행될때만 동작하기 때문에  미리 에러를 체크할 수 없다.

코드가 실행되고 브라우저의 콘솔창에서만 확인이 가능하다.

 

타입스크립트를 사용하게 되면

이렇게 props에  내가 원하는 값이 아닌 다른 값이 들어갔을때 작성시 바로 에러를 확인이 가능하다.

 

아주 편리하다.

 

이제 타입스크립트를 이용한 event를 다뤄보자.