HTML Select Element에서 값 가져오기 위해 React Ref 사용 방법

React Ref를 사용하여 HTML Select 요소에서 값 가져오기

React에서 DOM 요소에 직접 액세스하는 데는 ref 속성을 사용합니다. 일반적으로 input 요소와 함께 사용되지만, 선택한 옵션 값을 가져오기 위해 select 요소에도 사용할 수 있습니다. 이 블로그 포스트에서는 ref를 select 요소에 첨부하고 폼이 제출될 때 선택한 값 가져오는 다양한 방법을 살펴보겠습니다.

방법 1: 컴포넌트 상태에 값 저장하기

select 요소에서 선택한 값을 가져오는 한 가지 방법은 컴포넌트의 상태에 저장하는 것입니다. 이 접근 방식은 선택한 값이 항상 컴포넌트의 상태와 동기화된 제어 컴포넌트를 만들 수 있도록 해줍니다.

class App extends React.Component {
  constructor() {
    super();
    this.state = { selectValue: '' };
  }

  handleChange = (event) => {
    this.setState({ selectValue: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.selectValue);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <select className="form-control" id="ntype" required onChange={this.handleChange}>
          <option value="">None</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

방법 2: Ref 사용하기

직접적으로 ref를 사용하는 것을 선호한다면, ref를 select 요소에 첨부하고 필요할 때 선택한 값을 액세스할 수 있습니다.

class App extends React.Component {
  selectRef = React.createRef();

  handleSubmit = () => {
    console.log(this.selectRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <select ref={this.selectRef} className="form-control" id="ntype" required>
          <option value="">None</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

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

훅과 함께 함수형 컴포넌트를 사용하는 경우, useRef 훅을 사용하여 동일한 결과를 얻을 수 있습니다.

import React, { useRef } from 'react';

const App = () => {
  const selectRef = useRef(null);

  const handleSubmit = () => {
    console.log(selectRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <select ref={selectRef} className="form-control" id="ntype" required>
        <option value="">None</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

결론

이 블로그 포스트에서는 React에서 select 요소에 ref를 첨부하고 선택한 값을 가져오는 다양한 방법을 살펴보았습니다. 컴포넌트의 상태에 값 저장, 직접 ref를 사용하거나 함수형 컴포넌트에서 useRef 훅을 이용하는 방법 중 원하는 방법을 선택하여 React에서 select 요소의 효율적인 값 가져오기를 즐기세요.

참고 자료 : 

reactjs