컴포넌트 작성 가이드

컴포넌트 파일 세트

• Directorycomponent-name/

  • ComponentName.astro Astro 컴포넌트
  • _component-name.scss 컴포넌트 스타일
  • component-name.js 컴포넌트 스크립트

Astro 컴포넌트

ComponentName.astro

---
const { class: classNames, propA, propB, ...props } = Astro.props;
---

<div class:list={["v-component-name", classNames]} {...props}>
  <!-- … -->
</div>

컴포넌트 사용 시 class 추가를 할 수 있도록 기본적으로 위와 같은 패턴으로 클래스 처리 필요합니다.

somewher-else.astro

---
import ComponentName from "path/to/component-name/ComponentName.astro";
---

<ComponentName class="foo bar" propA={valueA} propB={valueB} />

컴포넌트 스타일

.astro 파일 내에 <style>로 선언하지 않고 별도 .scss 파일로 분리하여 작성합니다.

컴포넌트 스크립트

마찬가지로 별도 .js 파일로 분리하여 작성합니다.