[React] 리액트 - 함수 컴포넌트 정의와 사용

React에서 컴포넌트를 함수로 정의하고 사용자 정의 태그로 컴포넌트를 사용해보자.

그리고 리액트에서 함수를 정의할 땐 반드시 대문자로 시작해야 한다.

import './App.css';

// 컴포넌트 정의 1
function Header() {
  return  <header>
            <h1><a href='/'>WEB</a></h1>
          </header>
}

// 컴포넌트 정의 2
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>
  
}

// 컴포넌트 정의 3
function Article() {
  return  <article>
  <h2>Welcome</h2>
  Hello, WEB
</article>

}

function App() {
  return (
    <div>

      // 컴포넌트를 사용하기 위한 태그
      <Header />
      <Nav />
      <Article />
    </div>
  );
}

export default App;