4. props

 

https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5

저번 포스트에서 컴포넌트를 만들었다.

컴포넌트는 props라는 파라미터를 받을 수 있다. 컴포넌트에 파라미터로 넘기는 props의 이름은 아무렇게 지어도 되지만 일반적으로 "props"라고 이름을 정한다고 한다.

//App.js

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

각 컴포넌트 뒤에 title, topics, title, body 이런 것들이 다 props로 각각 컴포넌트에 파라미터로 넘어간다.

//App.js

function Header(props) {
  return  <header>
  
  <!--
  <h1><a href="/">WEB</a></h1>
  -->
  
  <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>
    
    <!--
      <li><a href="/read/1">html</a></li>
      <li><a href="/read/2">css</a></li>
      <li><a href="/read/3">js</a></li>
    -->  
    
      {lis}
    </ol>
  </nav>
}

function Article(props) {
  return <article>
  
  <!--
  <h2>Welcome</h2>
   Hello, WEB
   -->
    
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
...

props를 출력하기 위해서는 반드시 { } 를 사용해야한다. 만약 사용하지 않으면 props.title 이렇게 웹에 나타난다.

 

props는 object라서 props 뒤에 . 을 붙이고  App 함수에서 지정한 이름을 쓰면 그 값을 불러 올 수 있다.

 

nav와 같이 여러 가지 요소를 출력할 때는 리스트를 만들고 for문을 돌면서 하나씩 추가한 후 그 리스트를 찍어주면 된다.