[MDX] MDX (Markdown with JSX)란?

MDX (Markdown with JSX) 란?

MDX는 Markdown과 JSX(JavaScript XML)를 결합한 문서 형식이다.

쉽게 말해, MDX는 Markdown 파일 안에서 React 컴포넌트를 사용할 수 있게 해준다.

Markdown은 간단한 텍스트 서식을 만들기 위해 널리 사용되는 마크업 언어이고, JSX는 JavaScript에서 XML과 유사한 문법을 사용하여 UI를 정의할 수 있는 문법이다.

MDX는 두 가지의 장점을 합쳐, 콘텐츠 작성과 동적인 인터페이스 구성을 한 곳에서 할 수 있게 해준다.

 

MDX의 장점

1. 확장성: MDX를 사용하면 일반적인 Markdown에서 할 수 없는 복잡한 UI 요소를 쉽게 포함할 수 있다.
2. 재사용성: React 컴포넌트를 사용함으로써 코드를 재사용할 수 있다.
3. 생산성: Markdown의 간결함과 React의 강력함을 동시에 누릴 수 있어, 문서 작성과 UI 개발의 생산성을 크게 향상시킨다.
4. 유연성: 콘텐츠와 UI를 한 곳에서 관리할 수 있어 유지보수가 쉬워진다.

 

MDX 설정 방법

MDX를 프로젝트에 설정하는 방법

npm install @mdx-js/react

 

 

MDX 사용 예시

# Hello, MDX!

MDX는 정말 멋진 도구입니다. 이 문서 안에 React 컴포넌트를 포함할 수 있습니다.

<Alert message="이것은 React 컴포넌트입니다!" />

## 또 다른 섹션

여기서도 컴포넌트를 사용할 수 있습니다:

<Counter />

위 예시에서, # Hello, MDX!와 ## 또 다른 섹션은 Markdown 문법을 사용한 제목이다.

Alert와 Counter는 React 컴포넌트이다.

 

MDXProvider 설정

// src/components/MDXProvider.js
import { MDXProvider } from '@mdx-js/react';
import React from 'react';

const components = {
    // 여기에 사용할 컴포넌트를 정의합니다.
    Alert: (props) => <div style={{ backgroundColor: 'yellow' }} {...props} />,
    Counter: () => {
        const [count, setCount] = React.useState(0);
        return (
            <div>
                <p>{count}</p>
                <button onClick={() => setCount(count + 1)}>Increment</button>
            </div>
        );
    }
};

const MDXProviders = ({ children }) => {
    return <MDXProvider components={components}>{children}</MDXProvider>;
};

export default MDXProviders;

 

 

MDX 파일 사용

// src/pages/MyPage.js
import React from 'react';
import MDXProviders from '../components/MDXProvider';
import MyMDXContent from '../content/my-mdx-file.mdx';

const MyPage = () => {
    return (
        <MDXProviders>
            <MyMDXContent />
        </MDXProviders>
    );
};

export default MyPage;

이제 my-mdx-file.mdx 파일에서 Alert와 Counter 컴포넌트를 사용할 수 있다.

 

Markdown 문법

MDX는 기본적으로 Markdown 문법을 지원한다. 일반적인 Markdown 문법은 다음과 같다.

헤더

# H1

## H2

### H3

 

텍스트 스타일

*이탤릭* 또는 _이탤릭_

**굵게** 또는 __굵게__

~~취소선~~

 

링크

[링크 텍스트](https://arajo.tistory.com)

 

이미지


 

JSX 문법

MDX에서 가장 큰 특징은 JSX를 사용할 수 있다는 점이다. React 컴포넌트를 MDX 파일 내에서 직접 사용할 수 있다.

React 컴포넌트 사용:

# My MDX Document

<MyComponent prop="value" />

인라인 JSX:

이 문장 중간에 <strong>강조</strong>를 할 수 있다.

 

MDX와 Markdown의 혼합

MDX 파일에서는 Markdown 문법과 JSX 문법을 자유롭게 혼합하여 사용할 수 있다.

# My Awesome MDX Document

이 문서는 MDX를 사용하여 작성되었습니다. 

<MyComponent prop="value" />

아래는 코드 블록입니다:

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