[생활코딩/React] 2022개정판 | 5. props

참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 

1.  props 사용하기

---

html에 속성을 넣는 것처럼 리액트 코드에서도 속성을 사용해보자!

function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

👉🏻Header에 title이라는 props에 REACT라는 값을 넣어보자

function Header(props) {
  return(
      <header>
        <h1><a href='/'>{props.title}</a></h1>
      </header>
  )
}

👉🏻그리고 Header 컴포넌트에서 props로 인자를 받는다. 이 props를 활용하기 위해서는 중괄호로 묶어줘야 한다.

이렇게 REACT가 잘 출력되고 있다!!

function Nav() {
  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>
      </ol>
    </nav>
  )
}

👉🏻그럼 이제 Nav 컴포넌트도 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 title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome~" body="Hello, WEB!"></Article>
    </div>
  );
}

👉🏻먼저 App에서 topics라는 리스트에 Nav에 들어갈 내용을 객체로 만들어 담아준다. 그리고 topics라는 props으로 넘겨준다!

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

👉🏻그리고 props를 for문에 돌리면서 lis라는 리스트에 넣어준다. 그리고 이 리스트를 return해주면 된다!

👉🏻리액트 특성상 props의 고유한 값으로 key값을 설정해주어야 한다.

최종 코드