← 글 목록으로 돌아가기
MDX를 활용한 인터랙티브 블로그 콘텐츠 작성 가이드
Astro 블로그에서 마크다운 내에 리액트/Astro UI 컴포넌트와 JSX 구문을 탑재하여 역동적인 아티클을 작성하는 노하우입니다.
MDX(Markdown + JSX)란 무엇인가요?
일반 마크다운(.md)이 정적인 텍스트와 이미지 표현에 집중되어 있다면, **MDX(.mdx)**는 마크다운 문서 내부에서 자바스크립트 변수, JSX 문법, 그리고 Astro UI 컴포넌트를 직접 불러와 사용할 수 있는 확장 포맷입니다.
🔥 MDX의 핵심 장점
- 인터랙티브 컴포넌트 삽입: 마크다운 본문 중간에 버튼, 차트, 커스텀 경고창(Alert), 폼 요소 등을 바로 렌더링할 수 있습니다.
- 코드 재사용성: 자주 사용되는 안내 박스나 강조 UI 컴포넌트를 정의하고 마크다운에서 불러와 재사용합니다.
- Astro 컴포넌트 호환: Astro의
<HeaderLink />같은 기존 UI 컴포넌트를 자유롭게 불러올 수 있습니다.
💻 MDX 컴포넌트 내장 실습 예시
아래 버튼은 MDX 문서 내부에서 Astro UI 컴포넌트를 직접 호출하여 렌더링한 예시입니다:
👇 클릭해 보세요 (MDX 내장 버튼)
인터랙티브 버튼 클릭 테스트
💡 결론
Astro 블로그에서는 .md 파일뿐만 아니라 .mdx 확장자를 지원하므로, 풍부한 시각 자료와 동적 인터랙션이 필요한 기술 아티클을 더 높은 퀄리티로 제작할 수 있습니다.