React 4. 컴포넌트만들기

[ 리액트는 사용자 정의 태그를 만드는 기술이다 ]

 

[ 컴포넌트 만드는 법 ]

1) <header></header> 안에 있는 내용들을

    function App() 밖에 함수를 하나 만들면 됨 !

2) 컴포넌트로 만든(정의한) Header태그는 대문자로 작성해야 함 !

function App() {
  return (
    <div>
     <Header></Header>  <<<  무조건 대문자로 !
    </div>
  );
}

function Header(){
  return <header>                  <<<  여기에 return이 들어가야 됨 ! 중요 !
  <h1><a href="">WEB</a></h1>      <<<
</header>                          <<<
}

 

[ 전체 코드 ]

import logo from './logo.svg';
import './App.css';
import React from 'react';

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

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

function Nav(){
  return <nav>
        <ol>
          <li><a href="">html</a></li>
          <li><a href="">css</a></li>
          <li><a href="">js</a></li>
        </ol>
      </nav>
}

function Article(){
 return <article>
        <h2>Welcome</h2>
        Hello, Web
      </article>
}

export default App;