[javascript] Draft.js에서 텍스트 에디터의 단어 세기 기능 추가하기

24 Nov 2023

javascript

문서 작성 및 텍스트 편집에 자주 사용되는 Draft.js는 React 기반의 강력한 텍스트 에디터 라이브러리입니다. 이번 글에서는 Draft.js를 사용하여 텍스트 에디터에 단어 세기 기능을 추가하는 방법에 대해 알아보겠습니다.

단어 세기 기능의 필요성

텍스트 에디터를 사용하는 사용자에게 단어 수를 알려주는 기능은 다양한 상황에서 유용하게 사용될 수 있습니다. 예를 들어, 워드 프로세서에서 작성된 문서의 길이를 확인하거나, 작가가 최소한의 단어 수를 채우도록 하거나, 채우지 못한 부분을 강조하기 위해 사용할 수 있습니다.

Draft.js의 사용

먼저, 프로젝트에 Draft.js를 설치하고 불러옵니다. 다음과 같은 명령어를 사용하여 설치할 수 있습니다.

npm install draft-js

Draft.js를 사용하여 텍스트 에디터를 만들기 전에, 상태 관리를 위한 EditorState 객체를 생성해야 합니다. 이는 에디터의 현재 상태를 제어하는 데 사용됩니다.

import { EditorState } from 'draft-js';

const editorState = EditorState.createEmpty();

단어 세기 기능 추가

Draft.js에서 단어 세기 기능을 추가하기 위해선 다음과 같은 단계를 따르면 됩니다.

EditorState에서 현재 텍스트를 가져옵니다.
가져온 텍스트를 공백으로 구분하여 단어의 개수를 세어줍니다.
세어진 단어의 개수를 사용자에게 보여줍니다.

다음은 간단한 예제 코드입니다.

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

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

  const getWordCount = () => {
    const contentState = editorState.getCurrentContent();
    const text = contentState.getPlainText('');
    const words = text.trim().split(' ');
    return words.length;
  }

  return (
    <div>
      <Editor 
        editorState={editorState}
        onChange={setEditorState}
      />
      <p>단어 수: {getWordCount()}</p>
    </div>
  );
};

export default WordCountEditor;

위의 코드에서는 useState 훅을 사용하여 editorState를 관리하고, getWordCount 함수를 통해 단어 수를 계산하고 출력합니다.

마무리

이제 Draft.js를 사용하여 텍스트 에디터에 단어 세기 기능을 추가하는 방법에 대해 알아보았습니다. 이 기능을 개선하여 사용자의 요구에 맞게 확장할 수 있습니다. Draft.js의 다양한 기능과 API를 활용하여 텍스트 편집 경험을 보다 풍부하게 만들 수 있습니다.

단어 세기 기능의 필요성

Draft.js의 사용

단어 세기 기능 추가

마무리

참고 자료