[React] 마크다운 출력하기

리액트 프로젝트에서 게시글 작성 기능을 위해 마크다운을 출력해야 하는 경우가 있다. 마크다운 기능은 자체적으로 구현하기에 상당히 난이도 있기 때문에, 외부 라이브러리를 사용하여 구현하는 방법을 추천한다. 오늘은 여러 라이브러리 중 react-markdown을 사용하여 마크다운 기능을 구현해보고자 한다.

npm install react-markdown

import ReactMarkdown from "react-markdown";

const md = `
	content
`;

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

export default App;

사용 방법은 간단하다. 라이브러리 설치 후 ReactMarkdown 태그 사이에 콘텐츠를 작성하면, 내부 콘텐츠가 마크다운 적용된 상태로 출력이 된다.

npm install remark-gfm

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

const md = `
	content
`;

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

export default App;

react-markdown은 취소선, 테이블 기능 등을 지원하지 않기 때문에 remark-gfm 플러그인도 별도 설치하여 사용한다.

실제 프로젝트에서의 사용 예시이다. 게시글 입력 필드에 위와 같이 마크다운 형식으로 내용을 작성 후 미리보기 모달에서 ReactMarkdown 태그로 내용을 감싸니 아래 화면과 같이 마크다운이 잘 적용되는 것을 확인할 수 있다.

Reference

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