[props] children component로 정보 보내기, 아주 쉬운 map돌리기!

컴포넌트 -> 컴포넌트

potato 컴포넌트에 gamtui라는 value로 prop name을 줬다는 뜻

string뿐아니고 boolean, array등도 보낼 수 있음

 

potato function component의 argument(인자)로 넣을 수있다.

중괄호를 이용해 props object 내부 내용만 가져올 수도있다.

 

array를 만들어보았다. 이 배열을 Food컴포넌트에서 어떻게 렌더링 할 수 있을까

우선 함수를 만들어주고 맵을 돌려준다.

자바스크립트 문법 {}를 이용해 props를 불러와준다.

import React from "react";
// ./=same directory

function Food({ name, fat_contain }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <h3>{fat_contain}</h3>
    </div>
  );}

const foodILike = [
  {
    name: "Pizza",
    fat: "8"
  },
  {
    name: "Chicken",
    fat: "7"
  },
  {
    name: "Yogurt",
    fat: "2"
  },
  {
    name: "Mac&Cheese",
    fat: "10"
  }
]

function App() {
  return (
    <div>
      <h1>Hello</h1>
      {foodILike.map(dish => (
      <Food name={dish.name} fat_contain={dish.fat}/>))}
      {/* foodILike를 map돌리는데 dish를부름(이건 중요X) dish는 그냥 each of the items
      자동으로 Food가 ruturn됨 첫번째 dish의 name... */}
    </div>
  );
}

export default App;

 

참고로 렌더를 사용하여 똑같은 결과를 볼 수도있다.

 

다시 이전 코드로 돌아와서 unique key가 필요하다는 에러를 해결해보자

id값을 주고

key값을 넣어준다.

 

propTypes install후 확인하기: