[javascript] Draft.js를 이용한 텍스트 에디터의 글자 수 제한 기능 구현하기

24 Nov 2023

javascript

이번에는 Draft.js 라이브러리를 사용하여 텍스트 에디터에 글자 수 제한 기능을 구현하는 방법을 알아보겠습니다. 글자 수 제한은 사용자가 입력한 텍스트의 길이를 제한하고 제한을 초과할 경우 알림을 표시하는 기능입니다.

1. Draft.js 설치하기

먼저 프로젝트에 Draft.js를 설치해야 합니다. npm을 사용하여 다음 명령어를 실행합니다.

npm install draft-js

2. 에디터 컴포넌트 생성하기

텍스트 에디터를 사용할 컴포넌트를 생성합니다. 이 컴포넌트에서는 Draft.js의 Editor 컴포넌트를 사용하여 텍스트를 입력받습니다.

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

const TextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [characterCount, setCharacterCount] = useState(0);
  const maxCharacterCount = 100;

  const handleChange = (newEditorState) => {
    const contentState = newEditorState.getCurrentContent();
    const text = contentState.getPlainText();
    const count = text.length;
    
    if (count <= maxCharacterCount) {
      setEditorState(newEditorState);
      setCharacterCount(count);
    } else {
      // handle character limit exceeded
    }
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onChange={handleChange}
      />
      <span>{characterCount} / {maxCharacterCount}</span>
    </div>
  );
};

export default TextEditor;

위 코드에서는 useState 훅을 사용하여 editorState와 characterCount 상태를 관리합니다. handleChange 함수에서는 사용자의 입력이 변경될 때마다 글자 수를 계산하고 제한을 초과하지 않을 경우에만 상태를 업데이트합니다.

3. 글자 수 제한 알림 추가하기

글자 수 제한을 초과할 경우, 알림을 표시하도록 추가해봅시다. 예를 들어 사용자가 제한을 초과하여 입력할 때, 알림 메시지를 출력하는 컴포넌트를 생성합니다.

import React from 'react';

const CharacterLimitAlert = () => {
  return (
    <div>
      <p>글자 수 제한을 초과하였습니다.</p>
    </div>
  );
};

export default CharacterLimitAlert;

TextEditor 컴포넌트에서는 useState 훅을 사용하여 characterLimitExceeded 상태를 추가하고, 조건문에 따라 알림 컴포넌트를 렌더링합니다.

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

const TextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [characterCount, setCharacterCount] = useState(0);
  const [characterLimitExceeded, setCharacterLimitExceeded] = useState(false);
  const maxCharacterCount = 100;

  const handleChange = (newEditorState) => {
    const contentState = newEditorState.getCurrentContent();
    const text = contentState.getPlainText();
    const count = text.length;
    
    setCharacterLimitExceeded(count > maxCharacterCount);
    
    if (count <= maxCharacterCount) {
      setEditorState(newEditorState);
      setCharacterCount(count);
    }
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onChange={handleChange}
      />
      <span>{characterCount} / {maxCharacterCount}</span>
      {characterLimitExceeded && <CharacterLimitAlert />}
    </div>
  );
};

export default TextEditor;

위 코드에서는 characterLimitExceeded 상태를 추가하고, 글자 수 제한을 초과한 경우에만 characterLimitExceeded를 true로 설정하여 알림 컴포넌트를 렌더링합니다.

이제 글자 수 제한 기능이 있는 텍스트 에디터가 준비되었습니다. 위에서 작성한 TextEditor 컴포넌트를 다른 컴포넌트에서 사용할 수 있습니다.

결론

위에서는 Draft.js 라이브러리를 사용하여 텍스트 에디터에 글자 수 제한 기능을 구현하는 방법을 알아보았습니다. 글자 수 제한은 사용자가 입력한 텍스트의 길이를 제한하고 초과한 경우 알림을 표시하는 중요한 기능입니다. 이 기능을 구현하기 위해서는 Draft.js의 Editor 컴포넌트와 useState 훅을 사용하여 상태를 관리하고, 글자 수 제한 조건을 검사하여 알림을 표시할 수 있습니다.

참고 자료

Draft.js 공식 문서: https://draftjs.org/
React 공식 문서: https://reactjs.org/