Protection with PropTypes

react에서 컴포넌트에 prop을 보내는 것 까지는 해봤는데

이게 부모 컴포넌트로부터 전달 받은 prop이 내가 예상한 prop인지 확인할 수 있어야 한다.

항상 보이지 않는 에러를 방지하기 위해서는 꼼꼼한 체크가 필수 이다.

 

이제 체크하는 방법을 알아보자.

이전 포스팅 코드를 그대로 쓰면서 체크해 보겠다.

먼저 list에 객체들에 각각 rating을 추가하자. rating은 모든 것을 평가한다.

rating: 5.1 이런식으로 임의의 숫자를 추가한다

그리고 prop-types를 설치해준다.

prop-types 라이브러리는 내가 전달 받은 props가 내가 원하는 props인지 확인 해주는 라이브러리이다.

 

설치가 끝났으면 import PropTypes from "prop-types"; 임포트 해주고

Food컴포넌트에 rating 정보를 넘기고 태그하나를 작성한다.

 

그리고 Food.propTypes 로 Food컴포넌트에 property를 주고 

각각의 name, picture, rating  props에  PropTypes.string.isRequired~ 해주지

각 prop이 string인지 확인하는 절차이다 그리고 isRequired는  필수조건은 달아줘도 되고 안해도 되지만 확실히 하기 위해서

달아준다. 안달아주면 string또는 undefined라는 말이다.

이렇게 하고 콘솔창을 보면

친절하게 에러가 어떻게 발생했는지 콘솔에서 알려준다~

rating을 설정해줄때 위에서 number타입으로 줬는데 string이 맞는지 확인하니

prop - rating은 number의 타입으로 Food 컴포넌트에 제공되었는데 기대값은 string이다~ 라고 딱 나온다.

이제 다시 string을 number로 바꾸면~ 에러가 사라진다~

이렇게 제대로 prop을 줬는지 확인할 수 있다.

 

중요한 점은 Food.propTypes의 propTypes는 항상 propTypes로 써줘야 한다.

다른 무언가를 하게 되면 react는 체크 할 수 없다. 꼭 명심하고 사용하자.

 

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

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

리액트사이트에서 더 많은 예제를 볼 수 있다. 틈날 때 마다 확인 해보자~