리액트 react 컴포넌트 만들기

컴포넌트(사용자 정의 태그)는 첫 시작은 대문자

 

컴포넌트 정의

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>

  );

}