React 환경에서 Markdown 출력하기 (react-markdown)

 

 안녕하세요. Jay 입니다.

 오늘은 React-markdown(https://github.com/remarkjs/react-markdown)을 소개해보려고 합니다.

 

 간단한 프로젝트로 openai API 응답을 받아서 화면을 그려주는 프로젝트를 해보게 되었습니다. 해당 API는 SSE(Server-Sent-Event)로 동작하는데, 데이터가 마크다운 형식으로 응답하도록 구성되어 있어서 마크다운 형식을 보여줄 수 있도록 구현하는 것이 필요했습니다.

마크다운 형식의 텍스트를 서식이 있는 문서로 보여주는 라이브러리를 찾아봤는데, react-markdown을 찾았고, 괜찮은 라이브러리인 것 같아 한 번 얘기해보겠습니다.

 

 설치 방법은 간단합니다.

yarn add react-markdown

 

 설치를 했다면 프로젝트에 적용해보겠습니다. 코드는 아래와 같이 아주 간단하게 작성했습니다.

import ReactMarkdown from "react-markdown";

const md = `
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

1. first
2. second
3. third

* 안녕하세요.
* hi
* 하이
`;

function App() {
  return (
    <div className="App">
      <ReactMarkdown>{md}</ReactMarkdown>
    </div>
  );
}

export default App;

 

출력 결과는 아래와 같습니다. 입력된 마크다운 텍스트가 원하는 서식대로 출력된 것을 확인할 수 있습니다.

 

Remark

 ReactMarkdown은 remark plugin을 통해 기본 마크다운 문법 이외에도 다양한 변형 마크다운을 지원합니다.

Github-Flavored Markdown(GFM)

 마크다운의 변형으로 Github-Flavored Markdown이 있습니다. 취소선, 표, 자동 링크 변환, 작업 목록등을 지원합니다. GFM을 문법을 사용하고 싶다면, remark-gfm 패키지를 사용하면 됩니다.

 

 먼저 설치 합니다.

yarn add remark-gfm

 

 실제로 사용하보겠습니다. remark-gfm 패키지를 import하고, remarkPlugins 속성을 이용하여 ReactMarkdown에 적용했습니다. 그리고 작업 목록과 취소선 마크다운을 추가했습니다.

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

const md = `
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

1. first
2. second
3. third

* 안녕하세요.
* hi
* 하이

# 할 일
* [x] 개발하기
* [ ] 테스트하기
* [ ] ~~배포하기~~
`;

function App() {
  return (
    <div className="App">
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{md}</ReactMarkdown>
    </div>
  );
}

export default App;

 결과는 아래와 같습니다. 작업 목록과 취소선도 잘 적용된 것을 확인할 수 있습니다.

 

 이외에도 다양한 remark plugin들이 존재합니다. 본인의 필요에 따라 다양한 plugin을 import 해서 사용할 수 있습니다.

 

 참고: 

https://github.com/remarkjs/react-markdown

https://namu.wiki/w/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4#s-4.1