React에서 Markdown을 렌더링하는 방법

React 프로젝트에서 Markdown을 렌더링하기 위한 방법을 정리해보았습니다.
2taeyoon님의 글을 참고하여 작성했습니다.

---

1. react-markdown 설치

react-markdown은 Markdown을 HTML로 변환해주는 React용 라이브러리입니다.
아래 명령어 중 패키지 매니저에 맞게 설치하세요.

// npm
npm install react-markdown

// yarn
yarn add react-markdown

// pnpm 
pnpm add react-markdown

---

2. 기본 사용법

설치 후, 아래와 같이 컴포넌트에서 react-markdown을 사용해 Markdown을 렌더링할 수 있습니다.

import ReactMarkdown from 'react-markdown';

const PostDetail = ({ post }) => {
  return (
    <div>
      <ReactMarkdown>{post.content}</ReactMarkdown>
    </div>
  );
};

하지만 이렇게만 작성하면 TailwindCSS를 사용할 때 일부 Markdown 스타일이 제대로 적용되지 않는 경우가 있을 수 있습니다.
이를 해결하기 위해 Tailwind의 Typography 플러그인을 추가 설정해야 합니다.

---

3. TailwindCSS Typography 플러그인 추가

설치

TailwindCSS의 @tailwindcss/typography 플러그인을 설치합니다.

npm install -D @tailwindcss/typography

Tailwind 설정

tailwind.config.js 파일에서 플러그인을 추가합니다.

// tailwind.config
/** @type {import('tailwindcss').Config} */
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // 필요하면 Typography 관련 커스터마이징을 추가 가능
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

---

4. 최종 코드 구현

Typography 플러그인을 설정한 후, 아래와 같이 prose 클래스를 활용하여 Markdown 스타일을 적용할 수 있습니다.

import ReactMarkdown from 'react-markdown';

const PostDetail = ({ post }) => {
  return (
    <div className="prose dark:prose-invert max-w-none">
      <ReactMarkdown>{post.content}</ReactMarkdown>
    </div>
  );
};

---

5. 결과

마크다운으로 작성

마크다운 렌더링

---

react-markdown 사용 이유

• 마크다운 렌더링: 마크다운 문법을 HTML로 변환해 리액트 컴포넌트로 렌더링합니다.
• 확장성: 플러그인을 통해 마크다운 렌더링을 커스터마이징할 수 있습니다.
• 쉬운 사용법: 단순히 마크다운 텍스트를 컴포넌트에 전달하기만 하면 자동으로 렌더링됩니다.

@tailwindcss/typography 사용 이유

• 타이포그래피 최적화: 텍스트 기반 콘텐츠의 가독성을 높이기 위해 적절한 폰트 크기, 줄 간격, 색상등을 제공합니다.
• Tailwind의 이점 활용: Tailwind의 유틸리티 클래스들과 함께 사용할 수 있어 커스터마이징이 매우 유연합니다.
• 간편한 설정: Tailwind 설정 파일에서 플러그인을 활성화하면 바로 사용할 수 이씁니다.

조합해서 사용 이유

• 효율적인 렌더링과 스타일링: react-markdown으로 마크다운을 렌더링하고, @tailwindcss/typograpy를 사용해 자동으로 깔끔한 스타일을 적용했습니다.
• 빠른 개발: 별도의 CSS 파일 없이 Tailwind와 플러그인을 활용해 쉽게 마크다운 콘텐츠를 스타일링할 수 있습니다.
• 확장성: 두 라이브러리 모두 커스터마이징이 가능하므로 원하는 기능을 쉽게 추가할 수 있습니다.

---

✅ 참고

• React에서 markdown 랜더링하기_2taeyoon
• tailwindcss-typography