웹 애플리케이션에서 텍스트 에디터를 개발하는 경우, 사용자가 작성한 텍스트의 워드 카운트를 표시하는 기능은 매우 유용합니다. 이 기능을 구현하기 위해서는 Draft.js 라이브러리를 사용하여 텍스트 에디터를 만들고, 작성된 텍스트의 워드 카운트를 계산할 수 있어야 합니다.

이번 글에서는 Draft.js를 사용한 텍스트 에디터에 워드 카운트 기능을 추가하는 방법을 알아보겠습니다.

1. Draft.js 텍스트 에디터 생성하기

먼저, Draft.js 라이브러리를 설치하고 프로젝트에 추가해야 합니다. 설치 명령어는 다음과 같습니다:

npm install draft-js

텍스트 에디터를 만들기 위해 필요한 Draft.js의 기본 설정을 수행합니다:

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

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

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

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

export default TextEditor;

위 코드는 Draft.js의 Editor 컴포넌트를 사용하여 기본적인 텍스트 에디터를 생성하는 예시입니다. handleEditorChange 함수는 에디터의 변화를 감지하고 editorState를 업데이트합니다.

2. 워드 카운트 기능 추가하기

이제 텍스트 에디터에 워드 카운트 기능을 추가할 차례입니다. Draft.js의 EditorState 객체를 사용하여 텍스트의 워드 카운트를 계산할 수 있습니다.

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

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

  const handleEditorChange = (newEditorState) => {
    const content = newEditorState.getCurrentContent();
    const wordCount = content.getPlainText('').split(' ').length;

    setEditorState(newEditorState);
    console.log('Word count:', wordCount);
  };

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

export default TextEditor;

위 코드에서는 handleEditorChange 함수 내부에서 editorState를 업데이트한 후에 텍스트의 워드 카운트를 계산하고, 이를 콘솔에 출력하도록 했습니다. getPlainText 메서드를 사용하여 텍스트를 가져온 후에 공백을 기준으로 split 함수로 단어를 분리하고, 배열의 길이를 통해 워드 카운트를 얻을 수 있습니다.

텍스트 에디터에서 텍스트를 입력하면 콘솔에 워드 카운트가 출력될 것입니다.

마무리

이제 Draft.js를 사용한 텍스트 에디터에 워드 카운트 기능을 추가하는 방법에 대해 알아보았습니다. 이를 활용하여 텍스트 에디터를 개발하면 사용자가 작성한 텍스트의 워드 카운트를 편리하게 확인할 수 있습니다. 참고로, 텍스트 에디터에 저장 기능을 추가하거나 UI를 개선하는 등의 추가 작업도 가능합니다. Draft.js는 많은 기능을 제공하기 때문에 필요에 따라 다양한 기능을 적용해보세요!

더 자세한 내용은 Draft.js 공식 문서를 참고할 수 있습니다.