복잡한 태그들을 모아 하나의 그룹으로 만든 후 그 태그 사용하기.
function Header(){
return (HTML로 내용담기)
}
import logo from './logo.svg';
import './App.css';
// 컴포넌트를 만들 때는 함수로 만들어야하고 대문자를 사용해야 함
function Header(){
// return 값으로 html 코드를 리턴하면 됨
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>
);
}
export default App;
참고로 App() 처럼 대문자로 시작되는거 있으면 다 컴포넌트임 ㅋㅋ
state 가져다 쓸 때 문제 생김. 다른 function에 있는 state는 사용하지 못함..