[javascript] Draft.js를 사용한 텍스트 에디터의 상태 및 게시물 저장 및 복구 기능 구현하기

24 Nov 2023

javascript

텍스트 에디터는 웹 애플리케이션에서 중요한 부분입니다. 사용자의 텍스트 입력을 받고, 텍스트를 편집하고, 저장하고, 복구하는 기능이 필요한 경우가 많습니다. 이번 포스트에서는 Draft.js를 사용하여 텍스트 에디터의 상태 관리 및 게시물 저장 및 복구 기능을 구현하는 방법에 대해 알아보겠습니다.

Draft.js란?

Draft.js는 Facebook에서 개발한 React 기반의 텍스트 에디터 라이브러리입니다. 이 라이브러리는 복잡한 텍스트 에디팅 요구사항을 다루기 위해 설계되었으며, 강력한 기능과 유연성을 제공합니다.

텍스트 에디터의 상태 관리하기

Draft.js를 사용하여 텍스트 에디터의 상태를 관리하는 가장 기본적인 방법은 EditorState 객체를 사용하는 것입니다. EditorState는 현재 에디터의 내용과 선택된 텍스트 등을 포함하는 객체입니다. 이 객체를 사용하여 텍스트의 입력, 삭제, 스타일 변경 등과 같은 사용자의 편집 작업을 처리할 수 있습니다.

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

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

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

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

export default TextEditor;

위의 코드는 Draft.js의 Editor 컴포넌트를 사용하여 기본적인 텍스트 에디터를 생성하는 예시입니다. useState 훅을 사용하여 editorState를 관리하며, handleEditorChange 함수를 통해 편집 내용이 업데이트되면 상태를 갱신합니다.

게시물 저장 및 복구 기능 구현하기

사용자가 텍스트를 입력하고 편집한 후에는 이를 저장하여 나중에 복구할 수 있는 기능이 필요할 수 있습니다. Draft.js에서는 EditorState 객체를 직렬화하여 저장하고, 이를 다시 역직렬화하여 복구하는 방식을 사용할 수 있습니다.

const savedEditorState = localStorage.getItem("editorState");

const initialEditorState = savedEditorState
  ? EditorState.createWithContent(convertFromRaw(JSON.parse(savedEditorState)))
  : EditorState.createEmpty();

const [editorState, setEditorState] = useState(initialEditorState);

const handleEditorChange = (newEditorState) => {
  setEditorState(newEditorState);

  const contentState = newEditorState.getCurrentContent();
  const serializedContentState = JSON.stringify(convertToRaw(contentState));

  localStorage.setItem("editorState", serializedContentState);
};

위의 코드는 게시물을 로컬 스토리지에 저장하고 복구하는 예시입니다. localStorage를 사용하여 EditorState 객체를 직렬화하고, 게시물이 업데이트될 때마다 이를 저장합니다. 페이지를 새로고침하거나 다시 접속하여 텍스트 에디터를 열면, 로컬 스토리지에 저장된 게시물을 복구하여 초기 상태로 설정합니다.

마치며

이번 포스트에서는 Draft.js를 사용하여 텍스트 에디터의 상태 관리 및 게시물 저장 및 복구 기능을 구현하는 방법을 알아보았습니다. Draft.js의 강력한 기능을 활용하여 사용자 친화적이고 효율적인 텍스트 에디터를 구현할 수 있습니다. 참고문헌에는 Draft.js 공식 문서와 관련 자료들을 추가하였으니, 자세한 내용을 알고 싶다면 참고해보시기 바랍니다.