[javascript] Draft.js를 이용한 텍스트 에디터의 쪽지 기능 구현하기

24 Nov 2023

javascript

많은 웹 애플리케이션에서 텍스트 에디터는 중요한 구성 요소입니다. 그 중에서도 쪽지 기능은 사용자 간의 소통을 쉽게 만들어주는 중요한 기능 중 하나입니다. 이번 튜토리얼에서는 Draft.js를 사용하여 텍스트 에디터에 쪽지 기능을 구현하는 방법을 알아보겠습니다.

1. Draft.js 라이브러리 설치하기

먼저, 프로젝트 디렉토리에서 다음 명령을 사용하여 Draft.js 라이브러리와 관련 패키지를 설치합니다.

npm install draft-js react-draft-wysiwyg

2. 컴포넌트 생성하기

다음으로 NoteEditor 컴포넌트를 생성합니다. 이 컴포넌트는 Draft.js 에디터를 래핑하고 쪽지를 작성할 수 있는 기능을 제공합니다.

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

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

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

  const handleSaveNote = () => {
    const rawContentState = convertToRaw(editorState.getCurrentContent());
    const noteText = JSON.stringify(rawContentState);
    // 여기에서 쪽지 저장 기능을 구현합니다.
    console.log(noteText);
  };

  return (
    <div>
      <Editor editorState={editorState} onEditorStateChange={handleEditorChange} />
      <button onClick={handleSaveNote}>쪽지 저장</button>
    </div>
  );
};

export default NoteEditor;

3. 쪽지 저장 기능 구현하기

handleSaveNote 함수는 현재 쪽지의 내용을 JSON 문자열로 변환한 후 저장하는 기능을 구현하는 부분입니다. 여기에서는 간단하게 콘솔에 JSON 문자열을 출력하는 것으로 대체하였습니다. 이 함수를 사용하여 실제로 데이터베이스에 저장하는 로직을 추가할 수 있습니다.

4. 컴포넌트 사용하기

NoteEditor 컴포넌트를 원하는 곳에서 사용하여 텍스트 에디터에 쪽지 기능을 추가할 수 있습니다.

import React from 'react';
import NoteEditor from './NoteEditor';

const App = () => {
  return (
    <div>
      <h1>텍스트 에디터</h1>
      <NoteEditor />
    </div>
  );
};

export default App;

마무리

위의 단계들을 따라가면 Draft.js를 사용하여 텍스트 에디터의 쪽지 기능을 구현할 수 있습니다. 이 기능을 활용하여 사용자가 편리하게 쪽지를 작성하고 저장할 수 있는 웹 애플리케이션을 구축할 수 있습니다.

더 자세한 정보는 Draft.js 공식 문서를 참고하십시오.