MDX 기본 사용법

이것은 Markdown 문법입니다.

• 리스트
• 예시
• 입니다

코드 블록

console.log("Hello, MDX!");

이미지 삽입

---

3. JSX/React 컴포넌트 사용

아래처럼 컴포넌트를 import해서 사용할 수 있습니다.

import CallToAction from '../../components/CallToAction.astro';

<CallToAction title="MDX에서 Astro 컴포넌트 사용!" />

---

4. Props 전달

컴포넌트에 props를 전달할 수 있습니다.

import Pill from '../../components/Pill.astro';

<Pill color="blue">블루 Pill</Pill>
<Pill color="red">레드 Pill</Pill>

---

5. 동적 데이터/JSX 표현식

{["사과", "바나나", "체리"].map(fruit => <li>{fruit}</li>)}

---

6. 주의사항

• .mdx 파일에서 import 경로는 상대경로로 맞춰야 합니다.
• Astro 컴포넌트(.astro)와 React 컴포넌트(.jsx/.tsx) 모두 import해서 사용할 수 있습니다.
• Astro 컴포넌트는 <컴포넌트명 /> 형태로, React 컴포넌트는 <컴포넌트명 /> 또는 {} 안에서 사용합니다.

---

7. 기타 예시

인라인 스타일

<span style={{ color: "red", fontWeight: "bold" }}>빨간 글씨</span>

조건부 렌더링

{true ? <b>조건이 참입니다!</b> : <i>조건이 거짓입니다.</i>}

---

8. 참고

• Astro 공식 MDX 문서
• MDX 공식 문서

---

위 예시들을 test.mdx 파일에 복사해서 붙여넣고,
Astro 서버를 실행하면 다양한 MDX 기능을 직접 확인할 수 있습니다!
궁금한 점이 있으면 언제든 질문해주세요.