• 컴포넌트의 속성(props)으로 title, body 등을 전달하면 컴포넌트 정의 부분에서 props를 받아서 사용

• 중괄호{ } 사이에 있는 문자열은 표현식 or 있는 그대로의 파라미터 로 취급 ⇒ 해석되어 반영

• 동적으로 태그 추가 ⇒ for문 사용

• 리액트는 자동으로 생성한 태그들을 추적할 때 근거로 사용하기 위해 (prop) key 를 부여 해야 함

function Header(){
  return <header>
    <h1><a href=''>WEB</a></h1>
</header>
}
function Nav(){
  return <nav>
    <ol>
      <li><a href=''>html</a></li>
      <li><a href=''>css</a></li>
      <li><a href=''>js</a></li>
    </ol>
  </nav>
}
function Article(){
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

// props를 전달하여 생성한 코드

function Header(props){
  console.log("props : " , props, props.title)
  return <header>
    <h1><a href=''>{props.title}</a></h1>
	</header>
}

function Nav(props){
  const lis = []
  for(let i=0; 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>
}

function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}

function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'},
  ]
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav topics = {topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

출처 : 생활 코딩 - https://youtu.be/AoMv0SIjZL8