[javascript] Draft.js를 사용한 텍스트 에디터의 특정 단어 강조 기능 구현하기

24 Nov 2023

javascript

React와 함께 사용되는 Draft.js는 강력한 텍스트 에디터 라이브러리입니다. 이번 글에서는 Draft.js를 사용하여 텍스트 에디터에 특정 단어를 강조하는 기능을 구현하는 방법을 알아보겠습니다.

Draft.js란?

Draft.js는 Facebook에서 개발한 오픈 소스 텍스트 에디터 라이브러리로, React 애플리케이션과 함께 사용됩니다. Draft.js는 텍스트 입력, 텍스트 스타일링, 서식 지정, 커서 관리 등 다양한 기능을 제공하여 풍부한 텍스트 에디팅 경험을 제공합니다.

Draft.js로 텍스트 에디터 구성하기

먼저, React 애플리케이션에서 Draft.js를 사용하기 위해 다음과 같이 필요한 패키지를 설치합니다.

npm install draft-js react-draft-wysiwyg

이제, 간단한 텍스트 에디터를 구성하기 위해 다음과 같이 코드를 작성합니다.

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

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

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

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

export default TextEditor;

위 코드에서는 Editor 컴포넌트를 사용하여 간단한 텍스트 에디터를 생성합니다. editorState 상태와 handleEditorChange 함수를 사용하여 텍스트 입력 및 변경을 관리합니다.

특정 단어 강조 기능 구현하기

이제 텍스트 에디터에서 특정 단어를 강조하는 기능을 구현해보겠습니다. 예를 들어, 사용자가 입력한 모든 “Draft.js” 단어를 강조하는 기능을 구현해보겠습니다.

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

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

  useEffect(() => {
    const decorator = new CompositeDecorator([
      {
        strategy: findDraftWords,
        component: DraftHighlightSpan
      }
    ]);

    setEditorState(EditorState.set(editorState, { decorator }));
  }, []);

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

  const findDraftWords = (contentBlock, callback) => {
    const text = contentBlock.getText();
    const regex = /Draft.js/g;
    let match;
    
    while ((match = regex.exec(text)) !== null) {
      callback(match.index, match.index + match[0].length);
    }
  };

  const DraftHighlightSpan = (props) => {
    return (
      <span style={{ backgroundColor: 'yellow' }}>
        {props.children}
      </span>
    );
  };

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

export default TextEditor;

위 코드에서는 useEffect 훅을 사용하여 CompositeDecorator를 생성하고 editorState에 설정합니다. CompositeDecorator는 텍스트에서 특정 단어를 찾아 강조하는 방법을 정의하는 데 사용됩니다.

findDraftWords 함수는 텍스트에서 “Draft.js” 단어를 찾기 위한 정규식을 사용하여 특정 단어의 인덱스를 콜백으로 전달합니다.

DraftHighlightSpan 컴포넌트는 찾은 단어를 강조하는 스팬 요소입니다. 이 예제에서는 찾은 단어의 배경색을 노란색으로 설정하였습니다.

위 코드를 실행하면 텍스트 에디터에서 사용자가 입력한 모든 “Draft.js” 단어가 노란색으로 강조됩니다.

결론

이번 글에서는 Draft.js를 사용하여 텍스트 에디터에 특정 단어를 강조하는 기능을 구현하는 방법을 살펴보았습니다. Draft.js는 많은 기능을 가진 강력한 텍스트 에디터 라이브러리이므로, 다양한 텍스트 에디팅 기능을 구현할 수 있습니다.