MDX로 글 안에서 컴포넌트를 쓴다

마크다운은 글쓰기에 최적이지만, 가끔 마크다운 문법만으로는 표현이 안 되는 게 있다. 강조 박스, 경고, 인터랙티브한 무언가. 이럴 때 파일 확장자를 .mdx로 바꾸면 글 안에서 컴포넌트를 쓸 수 있다.

왜 MDX인가

MDX는 마크다운에 JSX를 얹은 형식이다. 평소엔 그냥 마크다운처럼 쓰다가, 필요한 곳에서만 컴포넌트를 불러 쓴다.

위 상자는 마크다운 문법이 아니다. src/components/Callout.astro 컴포넌트를 글 맨 위에서 import 해서 쓴 것이다.

---
title: MDX로 글 안에서 컴포넌트를 쓴다
---

import Callout from '@/components/Callout.astro';

<Callout title="정리">
  필요한 곳에서만 컴포넌트를 부른다.
</Callout>

켜는 법

공식 통합 하나만 추가하면 된다. 서드파티가 아니라 Astro가 관리하는 패키지다.

npx astro add mdx

이러면 astro.config.mjs에 통합이 등록되고, .mdx 파일이 컬렉션에 함께 잡힌다. 스키마도 마크다운과 똑같이 적용된다.

글의 본질은 여전히 텍스트다. MDX는 그 위에 필요한 만큼만 얹는 도구다.