두 번째 컴포넌트 만들기

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 12번째.

컴포넌트를 추출해 봅시다. 한 파일 내에 원하는 만큼 많은 컴포넌트를 정의할 수 있습니다. 작은 컴포넌트들을 위에 두고, App을 가장 아래에 둡니다:

function Welcome() {
    return <p>Glad you're here!</p>;
}

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

오직 App만 export default를 가집니다. 이것은 main.jsx가 렌더링하는 엔트리 컴포넌트입니다. 나머지는 내부 헬퍼입니다.

챌린지

초급

첫 번째 독립형 컴포넌트를 만드세요.

App 위에 Header(대문자 H!)라는 컴포넌트를 정의하세요. 이 컴포넌트는 id="page-title" 속성과 My Blog 텍스트를 가진 <h1>을 반환합니다.
App의 <div> 내부에서 <Header />로 렌더링하세요.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>