[javascript] Draft.js에서 텍스트 에디터의 축소 및 확대 기능 추가하기

24 Nov 2023

javascript

텍스트 에디터는 웹 애플리케이션에서 중요한 기능입니다. 사용자는 텍스트를 입력하고 수정하기 위해 편집기를 사용합니다. 이러한 편집기에 축소 및 확대 기능을 추가하면 사용자는 더 쉽게 작업할 수 있습니다. 이번 블로그 포스트에서는 Draft.js라는 JavaScript 라이브러리를 사용하여 텍스트 에디터에 축소 및 확대 기능을 추가하는 방법을 알아보겠습니다.

Draft.js란?

Draft.js는 Facebook에서 개발한 JavaScript 라이브러리로, 리액트 기반의 텍스트 에디터를 구축하는 데 사용됩니다. 이 라이브러리는 일반적인 텍스트 입력에 필요한 많은 기능을 제공하고 있습니다.

Draft.js에서 축소 및 확대 기능 추가하기

Draft.js 설치하기

Draft.js를 사용하기 위해 프로젝트에 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 NPM을 통해 Draft.js를 설치합니다.
```
npm install draft-js
```

에디터 컴포넌트 생성하기

축소 및 확대 기능을 추가하기 위해 별도의 에디터 컴포넌트를 생성해야 합니다. 이 컴포넌트는 Draft.js의 Editor 컴포넌트를 사용하여 텍스트 에디터를 구현합니다.

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

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };
  }

  onChange = (editorState) => {
    this.setState({ editorState });
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
      />
    );
  }
}

export default MyEditor;

위 코드에서 MyEditor 컴포넌트는 EditorState를 상태로 사용하며, onChange 메소드를 통해 편집기의 상태를 업데이트합니다.

축소 및 확대 버튼 추가하기

이제 텍스트 에디터 위에 축소 및 확대 버튼을 추가하겠습니다. 버튼 기능을 구현하기 위해 별도의 컴포넌트를 생성합니다.

import React from 'react';

class ZoomControls extends React.Component {
  zoomIn = () => {
    // 텍스트 에디터를 확대하는 로직을 구현합니다.
  }

  zoomOut = () => {
    // 텍스트 에디터를 축소하는 로직을 구현합니다.
  }

  render() {
    return (
      <div>
        <button onClick={this.zoomIn}>+ 축소</button>
        <button onClick={this.zoomOut}>- 확대</button>
      </div>
    );
  }
}

export default ZoomControls;

위 코드에서 zoomIn 및 zoomOut 메소드는 각각 텍스트 에디터를 확대하거나 축소하는 로직을 구현해야 합니다.

에디터와 버튼 컴포넌트 조합하기

마지막으로, MyEditor 컴포넌트와 ZoomControls 컴포넌트를 조합하여 텍스트 에디터와 버튼을 함께 표시하겠습니다.

import React from 'react';
import MyEditor from './MyEditor';
import ZoomControls from './ZoomControls';

class App extends React.Component {
  render() {
    return (
      <div>
        <ZoomControls />
        <MyEditor />
      </div>
    );
  }
}

export default App;

이제 애플리케이션에서 App 컴포넌트를 렌더링하면 축소 및 확대 버튼과 함께 텍스트 에디터가 표시됩니다.

마무리

이번 포스트에서는 Draft.js를 사용하여 텍스트 에디터에 축소 및 확대 기능을 추가하는 방법을 알아보았습니다. Draft.js를 사용하면 리액트 기반의 텍스트 에디터를 더욱 강력하게 구현할 수 있습니다. 관련 코드와 예제는 이 GitHub 저장소에서 확인하실 수 있습니다.