NextJs + Typescript 환경에서 react-draft-wysiwyg 활용하기

NextJs 를 쓰다보면 잊을만할 때쯤 'window is undefined' error 를 만날 수 있다. 이는 window 객체를 전혀 활용하고 있지 않을 떄도(않다고 생각하고 있을 때도) 마주할 수 있기 때문인데 브라우저에서만 동작하도록 개발된 library 사용이 그 범인일 확률이 높다.

이번 현장엔 react-draft-wysiwyg 가 있었다.

react-draft-wysiwyg는 페이스북이 개발한 draft-js 를 기반으로 작성한 오픈소스 에디터로 미리 만들어져 있는 css를 import해 손쉽게 커스텀이 가능한 이점을 가지고 있다.

그러나 앞서 말했듯이 빌드타임에서 불러오는 것이 불가능하기 때문에 NextJs에서 제공하는 dynamic module을 활용해 런타임에서 라이브러리를 불러오도록 한다.

// CustomEditor.jsx

...

// options의 ssr을 false로 주어 항상 런타임에서 모듈을 불러오도록 한다.
const Editor = dynamic(() => import('react-draft-wysiwyg').then((mod) => mod.Editor), {
  ssr: false,
})

...

typescript 에서 사용하기 위해 EditorProps를 불러와 타입을 지정해주고 원하는 커스텀을 className 을 활용해 넣어준다.
(사실 있는걸 수정하는게 가장 간단하며 시간을 절약할 수 있기 때문에 _app.tsx 에서 react-draft-wysiwyg.css 를 import 해 수정하는 것도 방법일 수 있다.)

// CustomEditor.tsx

// draft-js 를 기반을 작성되었기 때문에 DOM에 EditorState type을 넣어주어야 한다.
import { EditorState, convertToRaw } from 'draft-js'
import { EditorProps } from 'react-draft-wysiwyg'

// Editor Component 가 받을 타입 지정
const Editor = dynamic<EditorProps>(() => import('react-draft-wysiwyg').then((mod) => mod.Editor), {
  ssr: false,
})

const CustomEditor = () => {
	// EditorState.createEmpty() 로 초기값 설정
  	const [editorState, setEditorState] = useState<EditorState>(EditorState.createEmpty())

  	const onEditorStateChange = (editorState: EditorState) => {
      setEditorState(editorState)
    }
    
	return (
		<Editor
          editorState={editorState}
          wrapperClassName="wrapper-class"
          toolbarClassName="toolbar-class"
	      editorClassName="editor-class"
          onEditorStateChange={onEditorStateChange}
          placeholder="글을 쓰시오."
          toolbar={{
            options: ['inline', 'list', 'textAlign', 'link'], // 원하는 옵션 선택
          }}
          localization={{
            locale: 'ko',
          }}
      	/>
    )
}

export defualt CustomEditor

끝!