React 컴포넌트 만들기

사용자 정의 태그

• React에서 사용자 정의 태그를 만들 때 반드시 대문자를 사용한다.

function App() {
  return (
    <div>
      <header>
        <h1><a href="">WEB</a></h1>
      </header>
      <nav>
        <ol>
          <li><a href="">html</a></li>
          <li><a href="">css</a></li>
          <li><a href="">js</a></li>
        </ol>
      </nav>
      <article>
        <h2>Welcome</h2>
        Hello,WEB
      </article>
    </div>
  );
}

• header의 태그는 html의 태그이며 이 태그를 함수 function Header()와 같이 정의한다.

function Header(){
  return <header>
    <h1><a href="">WEB</a></h1>
  </header>

React에서는 사용자정의라는 표현이아닌 컴포넌트라고 정의한다

function App() {
  return (
    <div>
      <Header></Header>
      <Header></Header>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

위와 같이 간결한 코드로 완성할 수 있다.
header의 영역이 수 없이 많이 존재한다면 function Header()를 사용하는 컴포넌트의 영역을 한 번에 통제할 수 있다.