리엑트에서 마크다운 형식 실행하기

안녕하세요! 리액트에서 markdown 코드를 그대로 보여주면 그냥 일반 텍스트로 인식하게 돼요! 따라서 markdown 코드를 parsing해서 보여줄 수 있는 “react-markdown”과 같은 라이브러리를 사용하시면 될 것 같아요!

React에서 마크다운 형식을 실행하려면 일반적으로 마크다운 라이브러리를 사용해야 합니다. 대표적인 마크다운 라이브러리로는 "react-markdown"과 "remarkable"이 있습니다. 이러한 라이브러리를 사용하여 마크다운 텍스트를 JSX로 변환하고 렌더링할 수 있습니다. 여기에는 "react-markdown"을 사용하는 예시가 포함되어 있습니다: 1. 필요한 패키지를 설치합니다. 2. 컴포넌트에서 "react-markdown"을 import 합니다. 3. JSX에서 마크다운 컨텐츠를 렌더링합니다. 위의 예시에서 markdownContent 변수에 마크다운 형식의 텍스트를 저장하고, '<ReactMarkdown>' 컴포넌트를 사용하여 해당 변수를 렌더링합니다. 이렇게 하면 마크다운 텍스트가 올바르게 변환되어 제목, 본문, 목록 등의 형태로 화면에 표시됩니다. 위의 예시에서는 "react-markdown"을 사용하였지만, "remarkable" 등의 다른 마크다운 라이브러리를 사용하는 방법도 유사합니다. 선택한 라이브러리에 따라 문법과 사용법이 다를 수 있으니 해당 라이브러리의 문서를 참고하여 사용하시면 됩니다.

1#1
2npm install react-markdown
3
4#2
5import React from 'react';
6import ReactMarkdown from 'react-markdown';
7
8#3
9const markdownContent = `
10# 제목
11
12본문 내용입니다.
13
14- 항목 1
15- 항목 2
16- 항목 3
17`;
18
19function MyComponent() {
20  return (
21    <div>
22      <ReactMarkdown>{markdownContent}</ReactMarkdown>
23    </div>
24  );
25}