[React] Protection with PropTypes

리액트 props가 내가 원하는 props인지 확인하는 방법!
💎npm i prop-types 라이브러리를 설치해보자.

Typescript를 사용해도 되지만, React는 내장된 타입 확인 기능들을 가지고 있다.

리액트 공식문서에서도 확인할 수 있다.
=> PropTypes와 함께 하는 타입확인

import PropTypes from 'prop-types'; // 이렇게 라이브러리를 import해주고 사용하면 된다

const foodILike = [{...}];
                    
function Food ({ name, picture, rating }) {
    return (
      <div>
        <h1>Hello, {name}</h1>
        <h4>{rating}/5.0</h4>
        <img scr={picture} alt={name} />
 	 </div>
   );
}

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
};

function App() {
	return (
    	<div>
        {foodILike.map(dish=>(
        	<Food
              key={dish.id}
              name={dish.name}
              picture={dish.image}
              rating={dish.rating}
              />
        ))}
        </div>
    );
}

export App

결과는 콘솔 창에서 확인할 수 있다.