웹 개발을 할 때, 텍스트 에디터는 매우 유용한 도구입니다. Draft.js는 React 기반의 강력한 텍스트 에디터 라이브러리로, 웹 페이지에 텍스트 편집 기능을 쉽게 추가할 수 있습니다. 이번 글에서는 Draft.js를 사용하여 웹 페이지에 텍스트 에디터를 추가하는 방법에 대해 알아보겠습니다.

1. Draft.js 설치

먼저, 프로젝트에 Draft.js를 설치해야 합니다. npm을 사용하는 경우, 다음 명령어로 설치할 수 있습니다:

npm install draft-js

2. 에디터 컴포넌트 생성

Draft.js를 사용하여 텍스트 에디터를 만들기 위해, 에디터 컴포넌트를 생성해야 합니다. 다음과 같이 코드를 작성해봅시다:

import React, { useState } from 'react';
import { Editor, EditorState } from 'draft-js';

const TextEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  const handleChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  return (
    <div>
      <Editor editorState={editorState} onChange={handleChange} />
    </div>
  );
};

export default TextEditor;

위 코드에서는 useState를 사용하여 editorState를 관리하고 있습니다. onChange 핸들러를 통해 편집 내용이 변경될 때마다 editorState가 업데이트되도록 설정했습니다.

3. 웹 페이지에 텍스트 에디터 추가

이제 웹 페이지에 위에서 작성한 TextEditor 컴포넌트를 추가해봅시다. 다음과 같이 코드를 작성해주세요:

import React from 'react';
import ReactDOM from 'react-dom';
import TextEditor from './TextEditor';

ReactDOM.render(<TextEditor />, document.getElementById('root'));

위 코드에서는 ReactDOM.render 메서드를 사용하여 TextEditor 컴포넌트를 웹 페이지에 렌더링합니다. 텍스트 에디터가 웹 페이지에 정상적으로 표시될 것입니다.

마무리

이제 Draft.js를 사용하여 웹 페이지에 텍스트 에디터를 추가하는 방법을 알아보았습니다. Draft.js는 텍스트 편집을 보다 쉽고 유연하게 다룰 수 있도록 도와줍니다. 프로젝트에 텍스트 편집 기능이 필요하다면, Draft.js를 고려해보세요.

참고 자료

• Draft.js 공식 문서: https://draftjs.org/
• Draft.js GitHub 저장소: https://github.com/facebook/draft-js