[React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어

# Toast-UI Viewer 사용 방법

리액트 환경에서

HTML태그나 Markdown으로 작성된 내용을 Toast-UI Viewer 로 표시하는 방법을 정리한다.

(너무나 간단하다)

---

Toast-UI Editor 로 작성한 글을 HTML이나 Markdown 으로 "취득"하는 방법은 아래 글 참고.

[React] Toast UI Editor기본 사용 방법

---

1. 설치

- Toast-UI 에디터의 React Wrapper 버전을 설치한다.

- Viewer 도 여기에 설치되어 있다. 이미 설치했다면 생략하자.

npm install @toast-ui/react-editor

 

 

2. 사용

- Viewer 컴포넌트와 CSS를 임포트해주고

- Viewer 컴포넌트의 initialValue 프롭에 표시할 내용을 넣어준다.

// Toast-UI Viewer 임포트
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
import { Viewer } from '@toast-ui/react-editor';

export default function ToastViewer() {
  // 마크다운
  const markdown = '## 마크다운 헤더';

  // HTML: span태그 글자색을 파란색으로 설정
  const html = '<h3> html 헤더 <span style="color:blue;">파란색</span></h3>';

  return (
    <div>
      <Viewer initialValue={markdown} />

      <Viewer initialValue={html} />
    </div>
  );
}

 

 

3. 결과 확인

- Markdown과 HTML이 잘 표현되는 걸 확인할 수 있다.