사용자 정의 태그= 컴포넌트 만들기

그룹화 : 정리정돈! - 연관될것 모아 이름 붙이기

 

반드시! 사용자 정의 태그 이름의 첫글자는 대문자!

function Header() {
  return (
    <header>
      <h1>
        <a href="/">Web</a>
      </h1>
    </header>
  );
}

• 위와 같이 만들어 <Header></Header>와 같이 사용 가능함

import logo from "./logo.svg";
import "./App.css";
function Header() {
  return (
    <header>
      <h1>
        <a href="/">Web</a>
      </h1>
    </header>
  );
}
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>
  );
}
function Article() {
  return (
    <article>
      <h2>Welcome</h2>
      Hello, WEB
    </article>
  );
}
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

• return 넣는거 잊지 말기!