개발의 시작과 끝

2021.02.08 / React - Component 본문

리액트

2021.02.08 / React - Component

개발지혜 2021. 2. 8. 14:08

생활코드 11강 - 컴포넌트 만들기

 

리액트에서 컴포넌트는 웹 문서에서 어떠한 내용을 보여주기 위한

기본적인 단위로 자바스크립트 함수와 흡사하다고 보면 된다.

또한 이러한 컴포넌트는 props를 입력으로 받아서 리액트 요소를 반환하는 형태로 동작한다.

컴포넌트를 바라보는 첫 번째 시각은 정리정돈이다.

컴포넌트의 이름에만 집중하게 함으로써 복잡도를 획기적으로 줄일 수 있다.

그렇게 되면 더 많은 복잡도에 도전할 수 있는 여지가 생기게 된다.

 

정리 전

<html>
    <body>
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>

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

        <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
        </article>
    </body>
</html>

 

정리 후

class Subject extends Component {
  render() {
    return (
      <header>
          <h1>WEB</h1>
          world wide web!
      </header>
    );
  }
}

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

위의 코드는 다르지만 결과물은 동일하다.

 

 

참고

- www.youtube.com/watch?v=HZlH8olDeAQ&list=PLRx0vPvlEmdCED62ZIWCbI-6G_jcwmuFB&index=4

- www.youtube.com/watch?v=wzii1e_QWgc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=11

- www.youtube.com/watch?v=J3WQKH35f0M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=12

'리액트' 카테고리의 다른 글

2021.02.09 / React - 이벤트  (0) 2021.02.09
2021.02.09 / React - render  (0) 2021.02.09
2021.02.09 / React - key  (0) 2021.02.09
2021.02.09 / React - state  (4) 2021.02.09
2021.02.09 / React - props  (0) 2021.02.09
'리액트' Related Articles more