기본 제공 컴포넌트 참조

Astro에는 프로젝트에 사용할 수 있는 몇 가지 기본 제공 컴포넌트가 포함되어 있습니다. 모든 기본 제공 컴포넌트는 .astro 파일에서 사용할 수 있으며 가져오기 구문이 필요할 수 있습니다.

이러한 컴포넌트의 Props는 ComponentProps 타입 유틸리티를 사용하여 참조할 수 있습니다.

`<Code />`

---
import { Code } from 'astro:components';
---
<!-- JavaScript 코드 구문 강조. -->
<Code code={`const foo = 'bar';`} lang="js" />
<!-- 선택적: 테마 사용자 정의. -->
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
<!-- 선택적: 단어 줄 바꿈 사용. -->
<Code code={`const foo = 'bar';`} lang="js" wrap />
<!-- 선택적: 인라인 코드 출력. -->
<p>
  <Code code={`const foo = 'bar';`} lang="js" inline />
  will be rendered inline.
</p>
<!-- 선택적: defaultColor (기본 색상) -->
<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />

이 컴포넌트는 빌드 시 코드 블록에 구문 강조 표시를 제공합니다 (클라이언트 측 JavaScript는 포함되지 않음). 이 컴포넌트는 내부적으로 Shiki에 의해 구동되며 인기 있는 모든 테마 및 언어를 지원합니다. 또한 사용자 정의 테마, 언어, transformers 및 기본 색상을 각각 theme, lang, transformers, defaultColor 속성에 전달하여 추가할 수 있습니다.

Transformers

Added in: astro@4.11.0

Shiki transformers는 선택적으로 transformers 속성에 배열을 전달하여 코드에 적용할 수 있습니다. Astro v4.14.0부터는 Shiki의 meta 속성에 문자열을 제공하여 transformers에 옵션을 전달할 수도 있습니다.

transformers는 클래스만 적용하므로 코드 블록의 요소를 타겟팅하려면 고유한 CSS 규칙을 제공해야 합니다.

---
import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code
  code={code}
  lang="js"
  transformers={[transformerMetaHighlight()]}
  meta="{1,3}"
/>

<style is:global>
  pre.has-focused .line:not(.focused) {
    filter: blur(1px);
  }
</style>

`<Fragment />`

set:* 지시어와 함께 사용하여 추가 래핑 요소 없이 HTML 콘텐츠를 렌더링하는 컴포넌트입니다:

---
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />

Astro 구문에서 프래그먼트 사용에 대한 자세한 내용을 참조하세요.

`<Prism />`

Prism 구문 강조 컴포넌트를 사용하려면 먼저 @astrojs/prism 패키지를 설치하세요:

npm install @astrojs/prism

pnpm add @astrojs/prism

yarn add @astrojs/prism

---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />

이 컴포넌트는 Prism의 CSS 클래스를 적용하여 코드 블록에 언어별 구문 강조 표시를 제공합니다. 구문 강조 표시를 나타내기 위해 Prism CSS 스타일시트를 제공하거나 직접 가져와야 한다는 점에 유의하세요! 자세한 내용은 Prism 구성 섹션을 참조하세요.

Prism에서 지원하는 언어 목록에서 해당 언어의 별칭을 찾을 수 있습니다. 또한 lang="astro"를 사용하여 Astro 코드 블록을 표시할 수도 있습니다!

`<Image />`

---
// 이미지 컴포넌트와 이미지 가져오기
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // 이미지는 1600x900
---

<!-- 이미지 컴포넌트에서 `alt`는 필수입니다. -->
<Image src={myImage} alt="A description of my image." />

<!-- 출력 -->
<!-- 이미지가 최적화되고 적절한 속성이 적용됩니다. -->
<img
  src="/_astro/my_image.hash.webp"
  width="1600"
  height="900"
  decoding="async"
  loading="lazy"
  alt="A description of my image."
/>

속성

src (필수)
alt (필수)
width and height (public/ 및 원격 이미지에 대해 필수)
format
quality
densities
widths

위의 속성 외에도 <Image /> 컴포넌트는 HTML <img> 태그가 허용하는 모든 속성을 허용합니다.

자세한 내용은 이미지 가이드를 참조하세요.

`<Picture />`

Added in: astro@3.3.0

기본으로 제공되는 <Picture /> Astro 컴포넌트를 사용하여 다양한 형식 및/또는 크기의 반응형 이미지를 표시할 수 있습니다.

---
import { Picture } from 'astro:assets';
import myImage from "../assets/my_image.png"; // 이미지는 1600x900
---

<!-- Picture 컴포넌트에서 `alt`는 필수입니다. -->
<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />

<!-- 출력 -->
<picture>
  <source srcset="/_astro/my_image.hash.avif" type="image/avif" />
  <source srcset="/_astro/my_image.hash.webp" type="image/webp" />
  <img
    src="/_astro/my_image.hash.png"
    width="1600"
    height="900"
    decoding="async"
    loading="lazy"
    alt="A description of my image."
  />
</picture>

자세한 내용은 이미지 가이드를 참조하세요.

속성

<Picture />은 <Image /> 컴포넌트의 모든 속성과 함께 다음을 허용합니다:

`formats`

<source> 태그에 사용할 이미지 형식의 배열입니다. 기본적으로 ['webp']로 설정되어 있습니다.

`fallbackFormat`

<img> 태그의 대체 값으로 사용할 형식입니다. 기본값은 정적 이미지의 경우 .png, 애니메이션 이미지의 경우 .gif, SVG 파일의 경우 .svg입니다.

`pictureAttributes`

<picture> 태그에 추가할 속성의 객체입니다. 이 속성을 사용하여 외부 <picture> 요소 자체에 속성을 적용할 수 있습니다. <Picture /> 컴포넌트에 적용된 속성은 이미지 변환에 사용된 속성을 제외하고 내부 <img> 요소에 직접 적용됩니다.

`<Content />`

콘텐츠 컬렉션 항목의 콘텐츠를 렌더링하는 데 사용되는 일반 컴포넌트입니다.

먼저 getCollection() 또는 getEntry()를 사용하여 하나 이상의 항목을 쿼리합니다. 그러면 entry.render() 함수는 .astro 파일 템플릿에서 사용할 <Content /> 컴포넌트를 반환할 수 있습니다.

---
import { getEntry } from 'astro:content';
const entry = await getEntry('blog', 'post-1');
const { Content } = await entry.render();
---
<p>Published on: {entry.data.published.toDateString()}</p>
<Content />

`<ViewTransitions />`

Added in: astro@2.9.0

원하는 모든 페이지의 <head>에 <ViewTransitions /> 라우팅 컴포넌트를 가져와 추가하여 개별 페이지에서 view transitions를 사용하도록 설정합니다.

---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

페이지 요소 및 컴포넌트에 라우터 제어 및 전환 지시어를 추가하는 방법에 대한 자세한 내용을 참조하세요.

`<Debug />`

---
import { Debug } from 'astro:components';
const serverObject = {
  a: 0,
  b: "string",
  c: {
    nested: "object"
  }
}
---
<Debug {serverObject} />

이 컴포넌트는 JavaScript 없이 클라이언트 측에서 값을 검사할 수 있는 방법을 제공합니다.

기여하기

커뮤니티