[React] Protection with PropTypes


反応確認propsは私が欲しいpropsの方法です!
💎 npm i prop-typesライブラリをインストールします.Typescriptは使用可能ですが、Reactには内蔵タイプ確認機能があります.
反応公式文書で確認することもできます.
=> PropTypeのタイプの確認
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
結果はコンソールウィンドウで表示できます.