[TIL] 리액트 마크다운 예쁘게 로드하는 방법 (react-markdown)

백엔드쪽에서 마크다운 언어로 내려주는 데이터를 화면에 예쁘게 보여주기 위해서 방법을 검색해봤는데 생각보다 어렵지 않았다. 리액트에서 마크다운을 예쁘게 로드시켜주는 npm 라이브러리가 존재했기 때문!

리액트 마크다운 npm 설치

npm install react-markdown

설치 후, 사용하기

언제나 그렇듯 npm 설치를 마쳤다면 사용을 위해 import를 해주어야한다.

import ReactMarkdown from 'react-markdown'

 

import를 해줬다면 바로 사용하면 된다.

import React from "react";
import ReactMarkdown from 'react-markdown'

const ServerLawModal = (props) => {
  const { data } = props;

  return (
    <div classname='dataBox'>
      <ReactMarkdown>{data}</ReactMarkdown>
    </div>  
  );
};

 

내가 받아오고 있는 마크다운 데이터를 ReactMartdown 태그로 감싸주면 끝!

원하는 모양대로 아주 예쁘게 잘 나온다!