App.js 수정

import React from 'react';

function Food(props) {
  console.log(props);
  return <h1>I like Potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <Food fav='kimchi' something={true} papa={['hello', 1, 2, 3, 4]} />
    </div>
  );
}

export default App;

크롬 개발자 도구에서 Console 실행

App.js 수정

• { }로 값을 전달

import React from 'react';

function Food(props) {
  return <h1>I like { props.fav }</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <Food fav='kimchi' />
    </div>
  );
}

export default App;

• 이렇게도 가능(구조 분해 할당, destructuring-assignment)

import React from 'react';

function Food( { fav } ) {
  return <h1>I like { fav }</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <Food fav='kimchi' />
    </div>
  );
}

export default App;

• 추가

import React from 'react';

function Food( { fav } ) {
  return <h1>I like { fav }</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <Food fav='kimchi' />
      <Food fav='ramen' />
    </div>
  );
}

export default App;