⚛️React : section05 - props

이번 시간에는 props를 사용해서 태들을 동적으로 사용할 수 있게 할 것이다. 먼저 우리가 만든 App 컴포넌트를 보자.

 

function App() {

  return (

    <div>

      <Header></Header>

      <Nav></Nav>

      <Article></Article>

    </div>

  );

}

각자 필요한 태그들을 컴포넌트를 사용해서 우리들만의 태그를 생성했다. 여기에 우리는 props를 사용해서 웹브라우저에 나타나는 태그들을 동적으로 줄 것이다. 컴포넌트에 props를 적용하려면 우선 아래와 같아야 한다.

 

function App() {

  return (

    <div>

      <Header title="WEB"></Header>

      <Nav></Nav>

      <Article></Article>

    </div >

  );

}

 

이렇게 작성한 App컴포넌트를 Header부분의 컴포넌트에 propos를 부여 했을 때의 코드를 살펴보자.

 

function Header(props) {

  console.log(props)

  return <header>

    <title>section04</title>

    <h1><a href="/">WEB</a></h1>

  </header>

}

 

결과는 우리가 App컴포넌트에 기입했던 WEB이라는 title이 결과가 출력된다. 이렇게 우리가 양방향으로 직접적이게 값을 동적으로 변화줄 수 있는 환경이 완성 되었다. 나머지를 모두 작성하면 App 컴포넌트는 아래와 같다.

 

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" ></Article>

    </div >

  );

}

 

우리가 기존에 Nav컴포넌트에 있는 li태그들을 모두 작성했지만 topics라는 변수로 객체 생성을 해서 이것들을 props를 이용해서 값을 넘겨 준것이다. 넘겨받은 Nav 컴퍼넌트들은 아래와 같이 작성된다.

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>

}

lis라는 배열 변수에 topics 객체 크기 만큼 for문을 사용해서 li태그 값들을 집어 넣고 이것들을 lis에 바로 기입해버리는 것이다. 여기서는 for문을 사용했지만 이럴때는 map함수를 많이 사용한다. 이번 수업때 개인 training 폴더에 연습할 때는 map으로 구현해 보도록 하자. 마지막으로 key는 태그들을 동적으로 만들어 사용할 때 항상 key가 있어야 한다 이유는 리액트가 태그를 추적할 때 키를 이용해서 추적하기 때문이다. 이것을 꼭 기억하자. 아래 코드는 완성된 코드이다. 

function Header(props) {

  console.log(props)

  return <header>

    <title>section04</title>

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

  </header>

}

function Article(props) {

  return <article>

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

    {props.body}

  </article>

}

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 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" ></Article>

    </div >

  );

}

export default App;  //contact App_5.js

왜 console.log가 두번 찍히는지 알아보자. 이유는 app이 두번 랜더링이 되기 때문이라 짐작하는데 그래서인지 리액트 초기 로딩이 더 느리다는 점을 기억하자.