<Header title="react"></Header>

로 지정한 경우

함수에서는

function Header(props) {

  return <header>

    <h1>{props.title}</h1>

  </header>

}

로 사용

[변수를 prop 으로 넘기기 예제]

function App() {

  const topics = [

    {id:1, title:'html', body:'html is ...'},

    {id:2, title:'css', body: 'css is ...''},

    {id:3, title: 'js', body: 'js is ....'}

  ]

  return (

    <div>

      <Header></Header>

      <Nav topics={topics}></Nav>

    </div>

  );

}

function Nav(props) {

  const lis = [];

  for (let i=o; i<props.topics.length; i++) {

    let t = props.topics[i];

    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>);

  }

  return <nav>

    <ol>{lis}</ol>

  </nav>

}

}