페이지 구성하기

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

전형적인 페이지는 조합(composition)입니다. `App`은 이름이 지정된 블록들을 배치할 뿐입니다:

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

저 return 문을 소리 내어 읽어보세요. 위에서 아래로 페이지를 말 그대로 설명하고 있습니다. 각 블록은 자체 마크업을 숨기고 있으므로 Footer를 변경하더라도 Title이 깨질 위험이 전혀 없습니다. 이러한 구조가 바로 앞으로 만드는 모든 실제 App을 작성하게 될 방식입니다.

챌린지

쉬움

두 개의 컴포넌트로 페이지를 조립하세요.

Title 정의: id="page-title" 속성을 가지고 텍스트가 Coddy Cooking인 <h1>.
Footer 정의: id="page-footer" 속성을 가지고 텍스트가 Made with React인 <p>.
App은 먼저 <Title />를 렌더링한 다음 <Footer />를 렌더링합니다.

직접 해보기

<!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>