Props

Props란?

• props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖느다.
• 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능하다.

function App() {
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

• Header에 title값을 컴포넌트를 통해 수정할 수 있다.

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

• Header의 함수에 첫 번째 파라미터로 props입력 후 console.log로 확인
  
• 콘솔을 실행해 보면 props에는 title:"WEB"이라는 객체가 있는것을 확인할 수 있다.

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

• return값에 들어가는 구문에 {}사용
• {}(중괄호)사이에 있는 정보는 일반적인 문자열이 아닌 표현식으로 취급되기 때문에 안에 있는 내용이 해석되어서 props의title값이 반영된다.

---

목록이 있는 props

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="REACT"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

• topics의 값을 바꿀 수 없게 const로 지정한다.
• 목록이 있는 리스트이므로 배열로 담는다.
• 목록마다 내용이 다르므로 객체 설정
• 위와 같은 방법으로 <Nav topics={topics}></Nav> 중괄호로 문자열이 아닌 표현식
• topics={topics}의 내용을 컴포넌트를 통해 받아야 하므로

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>
}