기본 구성 요소

지금까지는 App이 모든 작업을 처리했습니다. 실제 React 앱은 페이지를 여러 개의 작은 컴포넌트로 분할하며, 컴포넌트를 사용하는 것은 HTML 태그를 사용하는 것과 완전히 동일하게 보입니다:

function Header() {
    return <h1>My Blog</h1>;
}

export default function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

React가 <Header />를 발견하면 작성한 function을 호출하고 반환하는 모든 것을 렌더링합니다. 두 가지 규칙:

• 컴포넌트 이름은 대문자로 시작합니다: 이것이 React가 <Header />(작성한 컴포넌트)와 <header>(HTML 태그)를 구별하는 방법입니다
• 단독 닫힘 태그처럼 사용하세요: <Header />

왜 굳이 이렇게 할까요? 이름이 지정된 블록(<Header />, <Menu />, <Footer />)으로 이루어진 페이지는 목차처럼 읽히며, 각 블록을 어디서나 재사용할 수 있기 때문입니다.