기초적인 prop 사용법

58번째에 사용된 map()함수는 배열변수에서만 사용할 수 있고 기본적으로 forEach 기능을 가지고 있다.

안에 들어갈 파라미터로는 함수가 들어간다. 

예를 들면

iLikeFood.map(function(item){

 <Food />

});

위와 같은 기본적인 형식이면 아래의 코드로와 기능은 같다.

iLikeFood.map( item => <Food />); 

 

item은 오브젝트이며 iLikeFood 배열에 존재하는 각각의 아이템들에 해당한다.

 

map함수의 기능으로는 배열안에 들어있는 오브젝트의 값을  Food라는 함수의 결과 값으로 바꾸는 기능 가지고 있다.

예를들어 iLikeFood 배열이 [1,2,3,4,5]라고 하자. 또 Food라는 함수의 return 값은 0이라고 한다면

 

iLikeFood.map( item => <Food />); 의 결과값으로 console.log(iLikeFood)를 찍어본다면 [0,0,0,0,0]이 나올것이다.

import React from 'react';
import PropTypes from 'prop-types';
 
const iLikeFood = [
  {
    id:1,
    name: "김밥",
    image: "../images/1.jpg",
    rating: 4.5
  },
  {
    id:2,
    name: "탕수육",
    image: "../images/2.jpg",
    rating: 4.0
  },
  {
    id:3,
    name: "라조기",
    image: "../images/3.jpg",
    rating: 3.8
  },
  {
    id:4,
    name: "동파육",
    image: "../images/4.jpg",
    rating: 4.3
  },
  {
    id:5,
    name: "족발",
    image: "../images/5.jpg",
    rating: 5.0
  },
]
Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number
};
 
function Food({name, picture, rating}){
  //console.log(props);
  //return (<h5>I have a {props.dessert}</h5>)
  return (
    <div>
      <h1>I like {name}</h1>
      <h4>{rating}/5.0</h4>
      <img src={picture} alt={name} />
    </div>
  )
}
 
function App() {
  return (
    <div className="App">
      Hello!!
      {iLikeFood.map(item => <Food key={item.id} name={item.name} picture={item.image} rating={item.rating} />)}
    </div>
  );
}
 
export default App;