텍스트 에디터는 사용자가 텍스트를 입력하고 편집할 수 있는 기능을 제공합니다. 이번에는 Draft.js를 사용하여 텍스트 에디터에 숫자 입력 제한 기능을 추가하는 방법에 대해 알아보겠습니다.

Draft.js란?

Draft.js는 React를 기반으로 한 JavaScript 라이브러리로, Rich Text Editor를 구현하는 데 사용됩니다. Draft.js는 사용하기 쉬우며, 다양한 플러그인을 통해 커스터마이징할 수 있습니다.

시작하기 전에

먼저, React 및 Draft.js가 설치되어 있는지 확인해야 합니다. 만약 설치되지 않았다면, 아래 명령을 사용하여 설치할 수 있습니다.

npm install react-draft-wysiwyg draft-js

숫자 입력 제한 기능 추가하기

1. Editor 컴포넌트 생성하기

   먼저, Draft.js의 Editor 컴포넌트를 생성해야 합니다. 아래와 같이 코드를 작성합니다.

   import React, { useState } from 'react';
   import { Editor, EditorState } from 'draft-js';
   
   const MyEditor = () => {
     const [editorState, setEditorState] = useState(EditorState.createEmpty());
   
     const handleChange = (newEditorState) => {
       setEditorState(newEditorState);
     };
   
     return (
       <Editor editorState={editorState} onChange={handleChange} />
     );
   };
   
   export default MyEditor;
   

2. 숫자 입력 제한 기능 추가하기

   이제 입력한 텍스트의 길이를 제한하는 기능을 추가해보겠습니다. handleChange 함수를 아래와 같이 수정하세요.

   const handleChange = (newEditorState) => {
     const maxLength = 10; // 입력 가능한 최대 문자 수
     const content = newEditorState.getCurrentContent();
     const text = content.getPlainText().slice(0, maxLength);
     const truncatedContent = ContentState.createFromText(text);
     const newContentState = Modifier.replaceWithFragment(
       content,
       content.getSelection(),
       truncatedContent.getBlockMap()
     );
        
     setEditorState(
       EditorState.push(newEditorState, newContentState, 'insert-fragment')
     );
   };
   

   위 코드에서 maxLength 변수는 입력 가능한 최대 문자 수를 나타냅니다. 사용자가 입력한 텍스트의 길이가 maxLength를 초과하면, 초과된 부분은 잘려서 에디터에 표시됩니다.

3. 테스트하기

   MyEditor 컴포넌트를 다른 컴포넌트에서 렌더링하여 테스트해보세요. 아래와 같이 코드를 작성하세요.

   import React from 'react';
   import MyEditor from './MyEditor';
   
   const App = () => {
     return (
       <div>
         <h1>숫자 입력 제한 테스트</h1>
         <MyEditor />
       </div>
     );
   };
   
   export default App;
   

   이제 npm start 명령을 사용하여 애플리케이션을 실행하고, 텍스트 에디터에서 숫자 입력 제한 기능이 동작하는지 확인하세요.

마무리

이번 포스팅에서는 Draft.js를 사용하여 텍스트 에디터에 숫자 입력 제한 기능을 추가하는 방법을 알아봤습니다. 이 기능은 입력 가능한 문자 수를 제한하는 데 유용하게 사용될 수 있습니다. 프로젝트에 적용해보고 필요에 따라 커스터마이징하여 사용해보세요!