많은 웹 애플리케이션에서 텍스트 에디터는 중요한 컴포넌트입니다. 사용자가 텍스트를 입력하면서 길어질 경우, 에디터가 자동으로 높이를 조정하여 콘텐츠를 올바르게 표시하도록 해야 합니다. 이 기능을 구현하기 위해 Draft.js를 사용할 수 있습니다.

Draft.js란?

Draft.js는 React 기반의 리치 텍스트 에디터 라이브러리입니다. Facebook에서 개발했으며, 웹 애플리케이션에서 텍스트 입력 및 편집 기능을 구현하는 데 사용됩니다. Draft.js는 다양한 텍스트 스타일링, 인라인 이미지 삽입, 플러그인 지원과 같은 고급 기능을 제공합니다.

텍스트 에디터의 높이 자동 조정하기

Draft.js의 ContentState 객체를 이용하여 텍스트 에디터의 내용을 관리할 수 있습니다. 에디터의 높이를 조정하기 위해선 텍스트 내용이 변경될 때마다 에디터의 높이를 업데이트해야 합니다.

다음은 Draft.js를 사용하여 텍스트 에디터의 높이를 자동 조정하는 예시 코드입니다.

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

const AutoResizeEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const editorRef = useRef(null);

  useEffect(() => {
    const editorHeight = editorRef.current.clientHeight;
    editorRef.current.style.height = `${editorHeight}px`;
  }, [editorState]);

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

  return (
    <div>
      <Editor
        ref={editorRef}
        editorState={editorState}
        onChange={handleChange}
      />
    </div>
  );
};

export default AutoResizeEditor;

위 코드에서는 AutoResizeEditor 컴포넌트를 정의하고, editorState라는 상태와 editorRef라는 ref를 사용합니다. useEffect 훅을 이용하여 editorRef.current의 높이를 업데이트하고, handleChange 함수를 통해 editorState를 업데이트합니다.

마무리

Draft.js는 텍스트 에디터를 만들기 위한 강력한 도구입니다. 이 라이브러리를 사용하면 사용자가 텍스트를 입력할 때 에디터의 높이를 자동으로 조정할 수 있습니다. 위 예시 코드를 참고하여 자신만의 텍스트 에디터를 만들어보세요.

참고 자료

• Draft.js 공식 문서: https://draftjs.org/
• React 공식 문서: https://reactjs.org/
• JavaScript 자습서: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide