[javascript] Draft.js로 구현된 에디터를 이용한 서버에 데이터 전송하기

24 Nov 2023

javascript

이번 글에서는 React와 Draft.js를 사용하여 구현된 에디터를 사용해 데이터를 서버에 전송하는 방법을 알아보겠습니다.

Draft.js 에디터 생성하기

먼저, Draft.js를 사용하여 에디터를 생성해보겠습니다. React 프로젝트에서 다음과 같이 코드를 작성해주세요.

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

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

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

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

export default MyEditor;

위 코드에서는 useState를 사용하여 editorState를 생성하고, onChange 핸들러를 통해 에디터의 변경사항을 감지합니다.

서버에 데이터 전송하기

에디터에 작성한 내용을 서버로 전송하기 위해서는 다음과 같은 단계를 따라야 합니다.

에디터에서 작성한 내용을 추출합니다.
추출한 내용을 서버로 전송합니다.

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

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

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

  const handleSubmit = () => {
    const contentState = editorState.getCurrentContent();
    const content = convertToRaw(contentState);

    axios.post('/api/submit', { content })
      .then(response => {
        // 서버 응답 처리
      })
      .catch(error => {
        // 에러 처리
      });
  }

  return (
    <div>
      <Editor editorState={editorState} onChange={handleChange} />
      <button onClick={handleSubmit}>서버에 전송</button>
    </div>
  );
}

export default MyEditor;

위 코드에서는 handleSubmit 함수를 추가하여 전송 버튼이 클릭될 때 서버에 데이터를 전송하도록 구현되었습니다. convertToRaw 함수를 사용하여 에디터의 내용을 추출하고, Axios를 사용하여 POST 요청을 전송합니다.

이제 Draft.js로 구현된 에디터를 사용해 서버에 데이터를 전송하는 방법을 익혔습니다. 이를 응용하여 다양한 기능을 구현해보세요!

Draft.js 에디터 생성하기

서버에 데이터 전송하기

참고 자료