JSX and Props

import React from 'react';
import './App.css';

function Food(props){
  {/*props를 출력해보면 component로 전달된 모든 props들이 들어있는 object가 출력된다.*/}
  console.log(props.fav);
  //props object를 열어서 fav를 꺼냄 
  return  <h1>I like {props.fav}</h1>;
}
function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi"
      />
      <Food fav="ramen"
      />
      <Food fav="samgiopsal"
      />
      <Food fav="chukumi"
      />
      {/*
      father(부모)이 Food(자식)component에 fav라는 이름, kimchi라는 value를 가진 property를 준다
      props란 위와 같이 component에 넣게 되는 것
      props는 children component의 argument(인자)로 간다
      */}
    </div>
  );
}

export default App;

• component에 정보를 보낼 수 있다.
• 재사용 가능한 컴포넌트를 만들 수 있다.
• js와 html사이의 조합을 jsx라 부른다. react에서 나온 매우 custom한 개념.