첫 번째 레이아웃 구축

요구 사항

공통 요소를 페이지 레이아웃으로 리팩터링
Astro <slot /> 요소를 사용하여 레이아웃 내에 페이지 콘텐츠 배치
페이지별 값을 레이아웃에 props로 전달

여전히 모든 페이지에 일부 Astro 컴포넌트가 반복적으로 렌더링되어 있습니다. 이제 공유 페이지 레이아웃을 만들기 위해 다시 리팩터링할 시간입니다!

첫 번째 레이아웃 컴포넌트 만들기

src/layouts/BaseLayout.astro 위치에 새 파일을 만듭니다. (먼저 새로운 layouts 폴더를 만들어야 합니다.)

index.astro의 전체 내용을 새 파일 BaseLayout.astro에 복사합니다.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

페이지에서 레이아웃 사용

src/pages/index.astro의 코드를 다음으로 바꿉니다.

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

브라우저 미리보기를 다시 확인하여 무엇이 변경되었거나 변경되지 않았는지 확인하세요.

바닥글 컴포넌트 바로 위의 src/layouts/BaseLayout.astro에 <slot /> 요소를 추가한 다음 홈 페이지의 브라우저 미리보기를 확인하고 이번에 실제로 변경된 내용을 확인하세요!

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

<slot />을 사용하면 <Component></Component> 태그 사이에 작성된 하위 콘텐츠를 Component.astro 파일에 삽입 (또는 “슬롯 인”)할 수 있습니다.

페이지별 값을 props로 전달

컴포넌트 속성을 사용하여 index.astro에서 레이아웃 컴포넌트에 페이지 제목을 전달합니다.

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

페이지 제목을 상수로 정의하는 대신 Astro.props를 통해 수신하도록 BaseLayout.astro 레이아웃 컴포넌트의 스크립트를 변경하세요.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
const { pageTitle } = Astro.props;
---

브라우저 미리보기를 확인하여 페이지 제목이 변경되지 않았는지 확인하세요. 값은 동일하지만 이제 동적으로 렌더링됩니다. 이제 각 개별 페이지는 레이아웃에 자체 제목을 지정할 수 있습니다.

직접 시도해 보기 - 레이아웃을 어디에서나 사용하세요

리팩터링하여 다른 페이지 (blog.astro 및 about.astro)가 새 <BaseLayout> 컴포넌트를 사용하여 공통 페이지 요소를 렌더링하도록 하세요.

다음 사항을 잊지 마세요.

컴포넌트 속성을 통해 페이지 제목을 props로 전달합니다.
레이아웃이 공통 요소의 HTML 렌더링을 담당하도록 합니다.
다음을 포함하여 레이아웃에 의해 처리되기 때문에 해당 페이지에서 더 이상 렌더링을 담당하지 않는 항목을 각 페이지에서 삭제합니다.
- HTML 요소
- 컴포넌트 및 가져오기 (imports)
- <style> 태그의 CSS 규칙 (예: 정보 페이지의 <h1>)
- <script> 태그

체크리스트

<slot />을 사용하여 Astro 레이아웃 컴포넌트를 만들 수 있습니다.
페이지별 속성을 레이아웃으로 보낼 수 있습니다.