[노마드코더/ReactJS로 영화 웹 서비스 만들기]2.4 Protection with PropTypes

2.4 Protection with PropTypes

• 목표 : father comonent로부터 전달 받은 props가 우리가 예상한 props인지 점검할 필요가 있음

  • 각각의 요소에 추가할 것은 rating (number type)
  • 점점 많은 props를 food object로 전달하고 싶기 때문
    (component와 Food의 인자에도 추가시켜줌)

• prop-types : 내가 전달받은 props가 원하는 props인지 확인

  • import PropTypes from "prop-types"; 코드 추가해줘야함

Food.propTypes={ //이름은 무조건 propTypes 여야함 
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating : PropTypes.number.isRequired

}; 
// 내가 원하는 type이 맞는지 확인시켜줌 
// 시각적으로 에러는 없지만 console 갔을 떄, propTypes 틀렸다는 것을 알려줌 

• rating : PropTypes.number.isRequired : type과 required를 체크
  • 필수여서 number만 가능 (undefined도 X)
• rating : PropTypes.number : type만 체크
  • 필수가 아니기 때문에 number 또는 undefined 도 가능
  • 아무것도 없을 떄는 에러가 안뜨지만 string이 들어갈 경우, error 발생