React에서 텍스트 영역에서 선택된 텍스트를 얻는 방법

React에서 TextArea에서 선택된 텍스트 가져오는 방법

React에서 텍스트 편집기를 만들고 있다면, 텍스트 에어리어에서 선택된 텍스트를 추출하는 방법이 궁금할 것입니다. 이 블로그 포스트에서는 React 애플리케이션에서 이 기능을 구현하는 다양한 방법을 살펴보겠습니다.

방법 1: 클래스 컴포넌트에서 Refs 사용하기

클래스 컴포넌트에서는 Refs를 사용하여 DOM 요소에 접근하고 텍스트 에어리어에서 선택된 텍스트를 가져올 수 있습니다. 다음과 같이 할 수 있습니다:

<textarea
  className='html-editor'
  ref='myTextarea'
  value={this.state.textareaVal}
  onChange={(event) => {
    this.setState({
      textareaVal: event.target.value
    });
  }}
>
</textarea>

// DOM 요소에 접근하기
let textVal = this.refs.myTextarea;

// 선택된 텍스트 가져오기
let cursorStart = textVal.selectionStart;
let cursorEnd = textVal.selectionEnd;
let selectedText = this.state.textareaVal.substring(cursorStart, cursorEnd);
console.log(selectedText);

방법 2: DraftJS 사용하기

보다 강력한 솔루션을 찾는다면, React용 강력한 리치 텍스트 편집기 프레임워크인 DraftJS를 사용해보세요. 이를 통해 텍스트 편집기를 처음부터 만드는 데에 관련된 다양한 복잡성을 추상화할 수 있습니다. 다음은 시작하는 방법입니다:

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}
      />
    );
  }
}

방법 3: 함수형 컴포넌트에서 Refs 사용하기

함수형 컴포넌트를 선호하는 경우, React 훅과 Refs를 사용하여 원하는 기능을 달성할 수 있습니다. 다음은 예시입니다:

import React, { useState, useRef } from 'react';

function MyEditor() {
  const [value, setValue] = useState('');

  const textareaRef = useRef(null);

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  const handleGetSelectedText = () => {
    const textVal = textareaRef.current;
    const cursorStart = textVal.selectionStart;
    const cursorEnd = textVal.selectionEnd;
    const selectedText = value.substring(cursorStart, cursorEnd);
    console.log(selectedText);
  };

  return (
    <div>
      <textarea
        ref={textareaRef}
        value={value}
        onChange={handleInputChange}
      />
      <button onClick={handleGetSelectedText}>Get Selected Text</button>
    </div>
  );
}

이제 React에서 텍스트 에어리아에서 선택된 텍스트를 가져오기 위해 세 가지 다른 방법을 가지고 있으므로 요구 사항에 가장 적합한 방법을 선택할 수 있습니다. 클래스 컴포넌트에서 refs를 사용하거나 DraftJS를 활용하거나, 함수형 컴포넌트에서 refs를 사용하는 등 이러한 접근 방식들은 손쉽게 강력한 텍스트 편집기를 구축하는 데 도움이 될 것입니다.

코딩 즐겁게!

참고 자료 : 

reactjs