react map함수 활용과 proptypes

jaegwan.kim·2021년 6월 8일
0

react 클론코딩

목록 보기
3/7
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라 컴포너트에 직접 전달되지는 않는다.

prop-types 도입하기

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

profile
focusing

0개의 댓글