첫 번째 레이아웃 구축

요구 사항

공통 요소를 페이지 레이아웃으로 리팩터링
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 렌더링을 담당하도록 합니다.
페이지 <head>에 있는 유지하려는 스타일이 포함된 모든 <style> 태그를 페이지 HTML 템플릿으로 이동합니다.
각 페이지에서 다음을 항목들을 포함하여 레이아웃에 의해 처리되는 모든 항목을 제거합니다.
- HTML 요소
- 컴포넌트 및 가져오기 (imports)
- <style> 태그의 CSS 규칙 (예: 정보 페이지의 <h1>)
- <script> 태그

<BaseLayout>을 사용하여 about.astro 페이지를 렌더링하면 이 페이지의 <head>에 추가된 <style> 태그가 손실됩니다. Astro의 범위 지정 스타일링을 사용하여 페이지 수준에서만 항목의 스타일을 계속 지정하려면 <style> 태그를 페이지 컴포넌트의 body로 이동하세요. 이렇게 하면 이 페이지 컴포넌트에서 생성된 요소 (예: 스킬 목록)의 스타일을 지정할 수 있습니다.

이제 <h1>이 레이아웃 컴포넌트에 의해 생성되었으므로 스타일 태그에 is:global 속성을 추가하여 다른 컴포넌트에 의해 생성된 요소를 포함하여 이 페이지의 모든 요소에 영향을 줄 수 있습니다: <style is:global define:vars={{ skillColor, fontWeight, textCase }}>

체크리스트

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

참고 자료

기여하기

커뮤니티

첫 번째 레이아웃 구축

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

페이지에서 레이아웃 사용

페이지별 값을 props로 전달

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

지식 테스트

체크리스트

참고 자료

여러분의 생각을 들려주세요!

GitHub Issue 생성

의견 보내기

의견 보내기