리액트 react 속성(props)

속성은 props를 사용

function Header(props) {

  console.log('props', props, props.title);

  return <header>

  <h1><a href="/">{props.title}</a></h1>

</header>

}

function Article(props) {

  return <article>

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

  {props.body}

</article>

}

 

prop을 이용한 출력 방법

function App() {

  return (

    <div>

      <Header title="REACT"></Header>

      <Nav></Nav>

      <Article title="Welcome" body="Hello, WEB"></Article>

      <Article title="Hi" body="Hello, React"></Article>

    </div>

  );

}

 

결과

 

li 같이 복수의 경우

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>

  );

}

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>

}

 

결과