[노마드코더/ReactJS로 영화 웹 서비스 만들기] #2.1 Reusable Components with JSX + Props

#2.1 Reusable Components with JSX + Props

• JSX 장점 : 재사용 가능한 component를 만들 수 있음

• component를 계속해서 반복 사용 가능

• <Food fav="kimchi" something={true} papapa={["hello",1,2,3,4]}/>
  • Food component에 정보를 보내는 방법
  • fav라는 이름의 property 를 kimchi라는 value로 줌
  • 다양한 타입의 value를 가질 수 있음
  • console.log(props)를 출력하면 property: value 모두 출력됨
  • 누군가가 food component로 정보를 보내려고 하면, react는 모든 property를 가져옴
  • 그리고 food function component의 argument(인자)로 모든 property를 넣음

• props 중 fav의 값 출력 하기 위함 probs.fav -> {fav}를 인자로 쓰면 됨

import React from 'react';

function Food({fav}){  //{fav}: property 가 fav인 값들 인자로 받음 

  return <h1> I like {fav} </h1> ;
}

function App() {
  return (
    <div>
     <h1>Hello !!!</h1>
     <Food fav="kimchi"/>  
     <Food fav="ramen"/> 
     <Food fav="samgiopsal"/> 
    </div>

  );
}
//Food 함수의 인자가 fav이므로 fav value 값들 모두 보내짐  

export default App;