컴포넌트 만들기

https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4 

 

사용자정의 태그를 만들고 싶다? 가장 중요한 개념 => 함수를 정의하면 됨!!  (반드시 대문자로 시작하기 - 소문자는 html 태그)   :  사용자 정의 태그가 곧 컴퍼넌트이다. 

 

 

※ article 태그란?

<article> 태그는 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용한다. 

 

※ header 태그 

흔히 썼던 <h1> ~ <h6> 태그를 포함하는 

문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용

 

 

function App() {

    return (       **소괄호임**

           내용

    ) ;    

}

 

 

# 최종 코드

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

function Header() {
  return <header>
    <h1><a href = "index.js">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>
}

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

export default App;

각각의 사용자 지정태그(컴포넌트)들을 function으로 정의함. 

그리고 return와 함께 쓴다. 

그리고 App에서 태그처럼(사용자가 function 에 붙힌 각각의 이름들) 사용해서 실행

(마지막 App에서는 div로 묶어야 오류 안 나는 이유..??)