React의 드롭다운 - Select 및 onChange

1. React의 사용자 지정 선택 구성 요소
2. JSX 사용
3. react-select 패키지

대화형 애플리케이션을 만들려면 React 개발자는 입력 요소를 만들고 이벤트를 처리해야 합니다. 드롭다운 양식은 널리 퍼져 있으며 가장 유용한 입력 유형 중 하나입니다. 이를 통해 사용자는 많은 옵션 중 하나를 선택하거나 기본적으로 하나를 선택할 수 있습니다. 옵션이 선택되면 해당 값에 액세스하여 구성 요소 상태에 저장할 수 있습니다.

선택 양식의 주요 목적은 사용자 데이터를 수집하는 것입니다. 예를 들어 사용자에게 성별을 선택하도록 요청할 수 있습니다.

이벤트 핸들러의 목적은 사용자의 동작을 추적하여 구성 요소 상태를 업데이트하는 것입니다. <select/> 요소와 관련하여 onChange 이벤트 핸들러는 사용자가 다른 <option/>을 선택할 때 실행되기 때문에 가장 유용합니다.

React의 사용자 지정 선택 구성 요소

복잡한 기능을 가진 일반적인 <select/> 요소가 필요한 경우 별도의 구성 요소를 만드는 것이 가장 좋습니다. 이런 식으로 이벤트 핸들러를 설정하고, 선택 값을 저장하고, 필요한 경우 상위 구성 요소에서 변경 사항을 트리거할 수 있습니다. props를 사용하여 사용자 지정 <select/> 구성 요소에 데이터를 공급할 수도 있습니다. 간단한 예를 살펴보겠습니다.

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="1-10">1-10</option>
    		<option value="10-15">10-15</option>
    		<option value="15-20">15-20</option>
    		<option value="20+">20+</option>
   		</select>
    	<h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}

이것은 <select> 요소의 주요 기능을 캡슐화하는 매우 기본적인 구성 요소입니다. 사용자는 옵션 중 하나를 선택할 수 있으며 selectedValue 상태 속성은 선택한 값을 저장합니다.

change 이벤트는 하위 요소가 아니라 <select> 요소에서 발생합니다. 사용자는 선택할 수 있는 여러 옵션이 있으며 선택 사항을 변경할 때마다 onChange 속성의 이벤트 핸들러가 실행되어 구성 요소 상태를 업데이트합니다.

상태가 변경될 때마다 구성 요소가 다시 렌더링되고 <h1> 텍스트에 업데이트된 값이 표시됩니다. playcode에서 직접 사용해 보세요.

옵션 배열 렌더링

종종 구성 요소는 props를 통해 전달된 데이터를 기반으로 출력을 조정하는 경우 훨씬 더 유용합니다. 이 예에는 <select> 요소의 핵심 기능을 통합하는 사용자 지정 구성 요소가 있습니다. 그러나 JSX 코드에 하드 코딩된 옵션 세트를 사용하면 사용자 지정 구성 요소를 만드는 목적을 달성할 수 없습니다. props를 통해 옵션 배열을 수락하고 그에 따라 옵션을 렌더링하는 것이 훨씬 더 실용적입니다. 다음은 예입니다.

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    <select onChange={(e) => handleChange(e)}>
    {this.props.options.map(arrayItem => <option value={arrayItem}>{arrayItem}</option>)}
    </select>
    <h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}
CustomSelect.defaultProps = {
  options: ["1-10", "10-15", "15-20", "20+"]
}

이 접근 방식을 통해 <CustomSelect> 구성 요소를 다양한 방식으로 더 자유롭게 사용할 수 있습니다. select 요소를 여러 번 생성하는 경우 옵션 배열만 props로 전달하면 됩니다. 예를 들어:

return (
    <div>
    ...
    <CustomSelect props=[firstArr]></CustomSelect>
    <CustomSelect props=[secondArr]></CustomSelect>
    ...
    </div>
    );

기능적 구성요소

지금까지의 예제에서는 클래스 구성 요소만 사용했습니다. 기능을 사용하여 사용자 지정 선택 구성 요소를 만들 수도 있습니다. 사실, 후크가 도입된 이후로 React 개발자는 기능적 구성 요소를 강력하게 선호하기 시작했습니다. 기능 구성 요소와 클래스 구성 요소의 차이점에 대해 자세히 알아보려면 이 가이드를 읽어보세요.

JSX 사용

<select>를 한 번만 사용해야 하는 경우 JSX에 요소를 직접 포함할 수 있습니다. 모르는 경우를 대비하여 JSX는 일반 HTML 구문과 매우 유사하지만 개발자에게 동적 응용 프로그램을 만들 수 있는 더 많은 권한을 제공하는 React용 특수 구문입니다.

JSX 구현은 다음과 같습니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
        <p>Choose the size of the t-shirt</p>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="S">S</option>
    		<option value="M">M</option>
    		<option value="L">L</option>
    		<option value="XL">XL</option>
   		</select>
    </div>
    );
  }
}

react-select 패키지

고급 솔루션을 찾고 있다면 자동 완성 및 다중 선택과 같은 광범위한 기능을 갖춘 맞춤형 Select를 제공하는 react-select 패키지 설치를 고려하십시오. 기능을 더 잘 이해하려면 그들의 ​​웹사이트를 살펴보십시오.