MDX 사용법

이 템플릿에는 @astrojs/mdx 통합이 설치되어 있습니다. MDX가 필요 없다면 astro.config.mjs에서 통합을 제거하면 됩니다.

MDX란?

MDX는 마크다운 안에서 자바스크립트와 JSX 문법을 쓸 수 있는 마크다운 확장입니다. 덕분에 마크다운 콘텐츠 안에 자바스크립트와 UI 컴포넌트를 섞어 쓸 수 있고, 인터랙티브 차트나 알림 카드 같은 것도 글 안에 넣을 수 있습니다.

이미 MDX로 쓴 콘텐츠가 있다면, 이 통합 덕분에 Astro로 옮겨 오는 일이 훨씬 쉬워질 것입니다.

MDX 안에서 UI 컴포넌트를 가져다 쓰는 예제입니다. 아래는 이 사이트에서 실제로 쓰고 있는 컴포넌트를 이 글 안에 넣은 것입니다.

MDX 안에 넣은 컴포넌트 — 누르면 블로그로 이동합니다

MDX 문법 문서
Astro 사용법 문서
참고: 인터랙티브 컴포넌트를 만들려면 클라이언트 디렉티브가 여전히 필요합니다. 그렇지 않으면 MDX의 모든 컴포넌트는 기본적으로 정적 HTML로 렌더링됩니다(자바스크립트 없음).