• 리액트 : 사용자 정의 태그를 만드는 기술

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

• 함수 명(컴포먼트 명)은 반드시 대문자로 시작!
• 리액트에서는 함수를 컴포넌트라고 부름
• 컴포넌트를 수정하면 컴포넌트를 호출하는 모든 곳에서 바뀜

function App() {
  return (
    <div>
      <header>
		    <h1><a href=''>WEB</a></h1>
			</header>
      <nav>
		    <ol>
		      <li><a href=''>html</a></li>
		      <li><a href=''>css</a></li>
		      <li><a href=''>js</a></li>
		    </ol>
		  </nav>
			<article>
		    <h2>Welcome</h2>
		    Hello, WEB
		  </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>
}
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

출처 : 생활 코딩 - https://youtu.be/AoMv0SIjZL8