들어가기 전에

저번 시간에는 컴포넌트를 만드는 기본적인 방법을 살펴보았습니다. 이번 시간에는 나머지 태그들을 컴포넌트화 시켜보겠습니다.

마치 집에 물건이 막 널부러져 있으면 서랍에 정리정돈해서 우리 눈에는 감추고 대신 이름을 붙여서 이름만 신경쓰면 되는 것처럼

리액트를 컴포넌트로 만들어 이름을 붙임으로써 복잡도를 낮추는 방법에 대해서 알아보겠습니다.  

학습목표

리액트의 컴포넌트를 통해 코드를 정리정돈할 수 있습니다.

강의 듣기

이번시간에는 나머지 태그들을 컴포넌트화시켜봅시다.

먼저 <nav> 태그 부분을 목차라는 뜻으로 table of content 의 약자 "TOC" 로 만들어보겠습니다.

class TOC extends Component{
  render(){
    return(
      <nav>
        <ul>
          <li><a href="1.html">HTML</a></li>
          <li><a href="2.html">CSS</a></li>
          <li><a href="3.html">JavaScript</a></li>
        </ul>
      </nav>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
      </div>
    );
  }
}

저번 시간에 만든 <Subject> 컴포넌트 아래에 <TOC> 컴포넌트를 추가했습니다.

마찬가지로 <article> 태그도 "Content" 라는 이름으로 컴포넌트화 해보겠습니다.

class Content extends Component{
  render(){
    return(
      <article>
        <h2>HTML</h2>
        HTML is HyperText Markup Language.
      </article>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

컴포넌트화를 시킨 웹 페이지와 pure.html을 비교해보세요.

만약 <article>영역의 코드가 1억 줄이라고 한다면 두 웹페이지는 우리 입장에서 굉장한 차이를 볼 수 있습니다.

리액트의 컴포넌트를 바라보는 첫번째 시각은 "정리정돈의 도구" 로 봐주셨으면 좋겠습니다.

이렇게 정리정돈을 통해 컴포넌트의 이름에만 집중하게 함으로써 복잡도를 획기적으로 낮출 수 있습니다.

생각해보기

아래 코드를 컴포넌트로 만들어보세요.

<footer>
  <h2>홍길동</h2>
  my React app is very good!
</footer>