react-markdown

react-markdown

 

react-markdown은 React 애플리케이션에서 Markdown 텍스트를 HTML 요소로 렌더링해주는 React 컴포넌트 라이브러리입니다. 즉, .md 형식의 텍스트를 JSX 형태로 변환하여 React 앱에서 직접 사용할 수 있게 해줍니다.

주요 특징

1. Markdown → React 컴포넌트로 변환
   • 일반 문자열의 Markdown 문법 (#, **, -, 등)을 <h1>, <strong>, <ul> 등으로 자동 렌더링합니다.
2. 플러그인 기반 확장성
   • remark와 rehype 플러그인을 통해 문법 확장, 커스터마이징, HTML 파싱 제어 등을 할 수 있습니다.
3. XSS 방지
   • 기본적으로 HTML 태그를 렌더링하지 않으며, rehype-sanitize 플러그인을 통해 보안을 강화할 수 있습니다.
4. 커스터마이징 용이
   • 각 Markdown 요소(<h1>, <a>, <code> 등)를 원하는 컴포넌트로 대체 가능 (components prop 사용).

설치 방법

npm install react-markdown

또는

yarn add react-markdown

기본 사용 예제

import ReactMarkdown from 'react-markdown';

const markdown = `
# 제목
**굵은 텍스트**

- 목록 1
- 목록 2
`;

function App() {
  return <ReactMarkdown>{markdown}</ReactMarkdown>;
}

커스터마이징 예제

<ReactMarkdown
  components={{
    h1: ({ node, ...props }) => <h1 style={{ color: 'red' }} {...props} />,
    a: ({ node, ...props }) => <a style={{ textDecoration: 'underline' }} {...props} />
  }}
>
  {markdown}
</ReactMarkdown>

보안 관련 (HTML 렌더링 차단)

기본적으로 HTML은 무시됩니다:

<ReactMarkdown>{'This is <b>not bold</b>'}</ReactMarkdown>

→ 결과: This is not bold

HTML을 허용하려면 rehype-raw 플러그인을 추가해야 하지만, 보안상 주의가 필요합니다.

 

https://www.npmjs.com/package/react-markdown

react-markdown