[ReactJS] ReactJS로 영화 웹 서비스 만들기 (8) - propTypes

우리는 항상 부모 component로 부터 전달받은 props가 우리가 예상한 props인지를 점검해야한다.

 

점검에 앞서 list에 있는 props에 rating을 추가하자.

이런식으로 많은 props를 전달하는것이 가능하다.

 

그리고 props types 를 설치한다.

npm i prop-types

 이 prop-types가 할 일은 내가 전달받은 props가 내가 원하는 props인지를 확인해 준다.

 

우리는 인간이기 때문에 실수를 할 수 있다. Food 컴포넌트가 다른 file에 있거나, 인자가 오타나거나 등등..

이 때 prop types는 내가 뭘 실수했는지 알려준다.

설치가 완료되면 package.json의 dependencies가 추가된다.

 

이제 prop-types를 사용해보자.

먼저 App.js에 import 한다.

import PropTypes from 'prop-types';

Food.propTypes를 만들어서 props를 체크하도록 할 것이다.

PropTypes 를 이용해야만하고 PropTypes.string.isRequired 로 한다.

실행시키면 시각적으론 문제가 없지만 console에선 에러가 발생한다.

rating의 type은 숫자로 제공되었지만 우리는 string을 기대하고 있기 때문이다. sting을 number로 고쳐보자

콘솔이 깔끔해졌다!

이런식으로 PropTypes으로 props를 체크할 수있다.

 

rating의 isRequired를 지우고 kimchi의 rating을 삭제해보자.

당연히도 에러는 발생하지 않는다. 필수가 아니기 때문에 number 혹은 undefined여도 가능하다.

 

하지만 rating을 string으로 바꾼다면?

number 나 undefined가 아니기 때문에 에러가 발생한다.

 

참고로 propTypes는 반드시 propTypes라고 이름지어야함.

rating을 string으로 바꿔서 콘솔에 에러가 떠야하지만 sexyTypes이기 때문에 인식을 못함

 

옵션들이 많다. 내가 원하는 거의 모든것을 체크할 수 있다. 매우 유용하겠지?

PropTypes와 함께 하는 타입 확인 – React