components

컴포넌트(Component)

Astro 컴포넌트는 모든 Astro 프로젝트의 기본 구성 요소예요. HTML만으로 이루어진 템플릿이라 클라이언트 쪽 런타임이 없고, .astro 확장자를 써요. HTML을 이미 안다면 Astro 컴포넌트도 바로 쓸 수 있어요.

출처: 공식문서

본문

Astro 컴포넌트는 아주 유연해요. 공통 <meta> 태그 묶음처럼 작은 HTML 조각일 수도, 헤더나 프로필 카드처럼 재사용하는 UI 요소일 수도 있어요. 심지어 페이지 전체 레이아웃을 담을 수도 있고, 특별한 src/pages/ 폴더에 두면 페이지 그 자체가 되기도 해요.

Astro 컴포넌트에서 가장 중요한 점은 클라이언트에서 렌더링되지 않는다는 거예요. 빌드 시점 또는 요청 시점(on-demand)에 HTML로 렌더링돼요. 컴포넌트 frontmatter 안에 JavaScript 코드를 넣을 수 있지만, 사용자 브라우저로 보내지는 최종 페이지에서는 모두 빠져요.

컴포넌트 구조

Astro 컴포넌트는 두 부분으로 이루어져 있어요: **컴포넌트 스크립트(Component Script)**와 컴포넌트 템플릿(Component Template). 둘은 역할이 다르지만 함께 쓰면 쉽게 쓰면서도 표현력이 풍부한 프레임워크를 만들어 줘요.

컴포넌트 스크립트

Astro는 코드 펜스(---)로 컴포넌트 스크립트를 구분해요. Markdown에 익숙하다면 비슷한 개념인 frontmatter를 떠올릴 수 있는데, Astro의 컴포넌트 스크립트는 바로 이 개념에서 영감을 받았어요.

참고: Astro 컴포넌트 스크립트는 TypeScript예요. 에디터 도구와 오류 검사를 위해 JavaScript에 추가 문법을 쓸 수 있어요.

---
// Your component script here!
import Banner from '../components/Banner.astro';
import Avatar from '../components/Avatar.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];

여기까지가 컴포넌트 스크립트예요.

컴포넌트 템플릿은 코드 펜스 아래에 있고, 컴포넌트의 HTML 출력을 결정해요. 순수 HTML을 쓰면 그 HTML을 Astro 페이지 어디에서 import하여 쓰든 그대로 렌더링해 줘요.

컴포넌트 Props

Astro 컴포넌트는 props를 정의하고 받을 수 있어요. 받은 props는 컴포넌트 템플릿에서 HTML을 렌더링할 때 사용할 수 있고, frontmatter 스크립트에서는 Astro.props 전역에서 접근할 수 있어요.

슬롯(Slots)

이 패턴은 Astro 레이아웃 컴포넌트의 기초예요. 페이지의 HTML 콘텐츠 전체를 <SomeLayoutComponent></SomeLayoutComponent> 태그로 '감싸서' 보내면, 그 컴포넌트 안에 정의된 공통 페이지 요소 안에서 렌더링하게 돼요.

---
// src/pages/fred.astro
import Wrapper from '../components/Wrapper.astro';
---
<Wrapper title="Fred's Page">
  <h2>All about Fred</h2>
  <p>Here is some stuff about Fred.</p>
</Wrapper>

이름이 있는 슬롯(Named Slots)

특정 슬롯에 HTML 콘텐츠를 넣으려면 자식 요소에 slot 속성으로 슬롯 이름을 지정하면 돼요. 이름이 없는 나머지 자식 요소는 기본(이름 없는) <slot />으로 들어가요.

---
// src/pages/fred.astro
import Wrapper from '../components/Wrapper.astro';
---
<Wrapper title="Fred's Page">
  <img src="https://my.photo/fred.jpg" slot="after-header" />
  <h2>All about Fred</h2>
  <p>Here is some stuff about Fred.</p>
  <p slot="after-footer">Copyright 2022</p>
</Wrapper>

여러 HTML 요소를 감싸는 <div> 없이 <slot/> 자리에 넘기고 싶다면, Astro의 <Fragment/> 컴포넌트에서 slot="" 속성을 쓰면 돼요.

슬롯의 기본 콘텐츠(Fallback Content)

슬롯은 기본 콘텐츠도 렌더링할 수 있어요. 슬롯에 넘길 자식이 없을 때, <slot /> 요소는 자기 안의 기본 자식 요소를 렌더링해요.

Astro는 슬롯 요소가 있지만 넘길 콘텐츠가 없으면 빈 슬롯을 전달해요. 기본 콘텐츠는 빈 슬롯이 전달됐을 때의 기본값으로 쓰일 수 없고, 슬롯 요소 자체를 찾을 수 없을 때만 표시돼요.

HTML 컴포넌트

Astro는 .html 파일을 컴포넌트처럼 import해서 쓸 수 있고, src/pages/ 하위에 두면 페이지로도 쓸 수 있어요. 프레임워크 없이 만든 기존 사이트의 코드를 재사용할 때, 또는 컴포넌트에 동적 기능이 없도록 하고 싶을 때 HTML 컴포넌트를 쓰면 좋아요.

더 알아보기