[React] 마크다운 에디터 사용하기 Toast UI Editor / useRef, forwardRef

프로젝트에서 질문, 답변을 마크다운으로 작성할 수 있게 구현하고 싶어서 여러 라이브러리를 찾아보던 중 에디터/뷰어를 간단하게 다룰 수 있는 Toast UI Editor를 선택하게 되었다.

설치

npm i --save @toast-ui/react-editor

설치 후 아래 구문으로 import 해온다.

import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/react-editor';

그럼 아래와 같은 에러가 발생한다(!)

에러 내용

WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

해결 방법

구글링을 통해 알게 된 해결 방법
https://github.com/nhn/tui.editor/issues/2137

package.json에서 아래와 같은 소스맵 설정을 추가해준다.

"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start"
    } 

옵션 설정

깃허브
https://github.com/nhn/tui.editor/tree/master/apps/react-editor

공식문서
https://nhn.github.io/tui.editor/latest/ToastUIEditorCore

위 링크에서 다양한 옵션을 확인할 수 있다.
툴바에 넣을 기능도 선택할 수 있어서 나는 이미지 선택 옵션은 제외했다.

//깃허브에 나와있는 예제
import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/react-editor';

const MyComponent = () => (
  <Editor
    initialValue="hello react editor world!"
    previewStyle="vertical"
    height="600px"
    initialEditType="markdown"
    useCommandShortcut={true}
  />
);

내가 적용한 모습

---

😎 글 수정 구현하기 (에디터에 초기 입력값 설정하기)

placeHolder, initialValue는 Editor의 기본 attribute로 있으니, 글 수정과 같은 때에만 이 방법을 사용하면 된다.

Editor의 입력값을 관리하는 부모 컴포넌트가 따로 있다면?

나의 경우는 Editor 컴포넌트가 따로 있고, 글 수정 페이지 컴포넌트(부모 컴포넌트)가 따로 있어서 ref를 props로 내려주어야 했다.

(글 수정, 글 작성, 답변 수정, 답변 작성 등 여러 페이지에서 Editor를 사용하고 있었기에 분리해놨다.)

ref는 그냥 상속을 못한다. 이때 필요한 것이 forwardRef 다.

forwardRef

Ref 전달하기는 일부 컴포넌트가 수신한 ref를 받아 조금 더 아래로 전달(즉, “전송”)할 수 있는 옵트인 기능입니다.
자세한 설명은 공식문서에서...

부모 컴포넌트에서 기존 작성 내용을 가지고 있다면, 부모 컴포넌트에서 useRef를 불러온다.

그리고 ref를 지정하여 넘겨준다.

//부모 컴포넌트
const editor = useRef()

...

<MarkdownEditor ref={editor} /> 


//MarkdownEditor
const MarkdownEditor = (props, ref) => {
  return <Editor ref={ref} initialValue={props.value}/>

여기서 포인트가 ref는 다른 props와 다르게 취급해야 한다는 것이다. (에러 나서 알게 됨)
첫 번째 인자는 props 객체, 두 번째 인자로 ref를 받아야 한다.

그럼 이제 끝이다.

editor.current.getInstance().setHTML(value);

부모 컴포넌트에서 위와 같은 메서드로 에디터 입력창에 value를 설정할 수 있다.

글 수정이 아닌, 글 작성 컴포넌트에서는 props로 value="원하는 초기값"을 내려주어야 한다.
ex) value="please write here..."