function renderFood(dish){
return (<Food dish={dish.name} img={dish.image}/>) //return값으로 넘겨쥐야함 . 화살표함수는 한 줄일 시 return 표현이 생략됨
}
function App() {
return (// fav props 값으로 kimchi 추가
<div>
{foodILike.map(renderFood)}
</div>
);
}
// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
// 중괄호({})를 생략할 수 있다.
각각 리액트의 원소들은 유일해야 하는데 이를 위해 key props를 추가
id:1,
...
{foodILike.map(dish=><Food key={dish.id} dish={dish.name} img={dish.image}/>)}
key props는 props이름을 key로 명명
다만 key props는 리액트 내부에서 사용되는 특수 props라 컴포너트에 직접 전달되지는 않는다.
npm install --save prop-types
import PropTypes from 'prop-types';
...
Food.propTypes ={
dish: PropTypes.string.isRequired,
img: PropTypes.string.isRequired,
rating: PropTypes.number.isRequired,
}
export default App;
https://ko.reactjs.org/docs/typechecking-with-proptypes.html