[React]React-Markdown

내가 프로젝트의 기능 중 하나가 

모집글을 올리는 것인데

 

그걸 마크다운을 활용하여 

올리게 하자고 의견이 나왔다

---

React-Markdown

react-markdown은 react에서 마크다운 문법을 렌더링 할 수 있게 만드는 React의 라이브러리다

 

Markdown 형식으로 작성된 텍스트를 HTML로 변환하고, React 컴포넌트로 렌더링 할 수 있도록 해준다

그리고 우리는 추가적으로 rehype-raw도 활용해 볼 것이다

npm install react-markdown rehype-raw

 

사용하는 방법은 <ReactMarkdown> 태그로 안의 요소를 묶어주면 된다

 

그래서 간단하게 입출력 코드를 작성해 보면

import React, { useState } from "react";
import ReactMarkdown from "react-markdown";

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState("");

  return (
    <div style={{ display: "flex", gap: "20px" }}>
      {/*입력 부분*/}
      <textarea
        value={markdown}
        onChange={(e) => setMarkdown(e.target.value)}
        placeholder="마크다운으로 작성해 주세요"
        style={{
          height: "400px",
          width: "50%",
        }}
      />

      {/*출력 부분*/}
      <div
        style={{
          height: "400px",
          width: "50%",
          background: "#f9f9f9",
        }}
      >
        <ReactMarkdown>{markdown}</ReactMarkdown> 
      </div>
    </div>
  );
};

export default MarkdownEditor;

코드는 정말 간단하다

 

textarea에 우리가 글을 적으면 아래 div에서 출력하는 간단한 코드인데 

위에서 말했던 <ReactMarkdown>으로 markdown을 감쌌다

잘 나오는데 문제가 있다

 

<br>이라던지 <center>이라던지 인식을 하지 못한다

 

그 이유는 기본적으로

HTML을 안전하게 렌더링 하기 위해 HTML 스타일 태그를  무시하거나 비활성화하도록 설정되어 있다고 한다

 

그래서 위에 말했던 rehype-raw가 필요하다

 

import React, { useState } from "react";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState(``);

  return (
    <div style={{ display: "flex", gap: "20px" }}>
      {/* Markdown 입력창 */}
      <textarea
        value={markdown}
        onChange={(e) => setMarkdown(e.target.value)}
        style={{
          width: "50%",
          height: "400px",
        }}
        placeholder="Enter your Markdown here..."
      />

      {/* Markdown 렌더링 */}
      <div
        style={{
          width: "50%",
          height: "400px",
          background: "#f9f9f9",
        }}
      >
        <ReactMarkdown rehypePlugins={[rehypeRaw]}>{markdown}</ReactMarkdown>
      </div>
    </div>
  );
};

export default MarkdownEditor;

rehypeRaw를 import해와 rehypePlugins에 넣으면 된다

 

그러면 이렇게 잘 적용이 된다

---

결론

평소에 막연하게 궁금해했던 웹에서 markdown문법을 어떻게 사용하는지 알게 되어서 좋았다

자신의 상황에 맞추어서 잘 활용하면 좋겠다