리액트에서 다중선택 select 옵션을 동적으로 표현

 

리액트에서 다중 선택이 가능한 <select> 요소는 multiple 속성을 사용하여 구현한다.

 

기본적인 다중선택 select 구현

import React, { useState } from "react";

function MultiSelectExample() {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleChange = (event) => {
    const options = event.target.options;
    const selectedValues = [];
    for (let i = 0; i < options.length; i++) {
      if (options[i].selected) {
        selectedValues.push(options[i].value);
      }
    }
    setSelectedOptions(selectedValues); // 선택된 값을 상태로 업데이트
  };

  return (
    <div>
      <h3>다중 선택 셀렉트 박스</h3>
      <select multiple={true} value={selectedOptions} onChange={handleChange}>
        <option value="apple">사과</option>
        <option value="banana">바나나</option>
        <option value="cherry">체리</option>
        <option value="date">대추야자</option>
        <option value="elderberry">엘더베리</option>
      </select>
      <p>선택된 과일: {selectedOptions.join(", ")}</p>
    </div>
  );
}

export default MultiSelectExample;

 

 

옵션 리스트가 동적으로 변경되어야 할 경우, 배열 데이터를 기반으로 <option>을 렌더링할 수 있다.

---

 

옵션을 동적으로 적용하는 다중선택

 

import React, { useState } from "react";

function DynamicMultiSelect() {
  const [selectedOptions, setSelectedOptions] = useState([]);
  const fruits = ["사과", "바나나", "체리", "대추야자", "엘더베리"];

  const handleChange = (event) => {
    const options = event.target.options;
    const selectedValues = [];
    for (let i = 0; i < options.length; i++) {
      if (options[i].selected) {
        selectedValues.push(options[i].value);
      }
    }
    setSelectedOptions(selectedValues);
  };

  return (
    <div>
      <h3>동적 다중 선택</h3>
      <select multiple={true} value={selectedOptions} onChange={handleChange}>
        {fruits.map((fruit, index) => (
          <option key={index} value={fruit}>
            {fruit}
          </option>
        ))}
      </select>
      <p>선택된 과일: {selectedOptions.join(", ")}</p>
    </div>
  );
}

export default DynamicMultiSelect;

 

---

 

코드분석

1. useState를 사용한 상태 관리

• useState([])로 selectedOptions라는 상태를 초기화한다. 이 상태는 사용자가 선택한 과일들을 배열 형태로 저장한다.
• setSelectedOptions는 이 상태를 업데이트할 수 있는 함수이다.

2. 동적 과일 목록

• fruits 배열에 선택할 수 있는 과일 목록이 있다.

3. handleChange 함수

const handleChange = (event) => {
  const options = event.target.options;
  const selectedValues = [];
  for (let i = 0; i < options.length; i++) {
    if (options[i].selected) {
      selectedValues.push(options[i].value);
    }
  }
  setSelectedOptions(selectedValues);
};

 

• handleChange 함수는 <select> 요소의 onChange 이벤트 핸들러이다. 사용자가 선택을 변경할 때마다 호출된다.
• event.target.options를 통해 <select>요소에 포함된 모든 <option> 요소를 가져온다.
• option[i].selected를 사용해 각 옵션이 선택된 상태인지 확인하고, 선택된 값들을 selectedValues 배열에 추가한다.
• 마지막으로  setSelectedOptions(selectedValues)를 호출해 selectedOptions 상태를 업데이트 한다.

4. select 요소

<select multiple={true} value={selectedOptions} onChange={handleChange}>
  {fruits.map((fruit, index) => (
    <option key={index} value={fruit}>
      {fruit}
    </option>
  ))}
</select>

 

• <select> 요소는 multiple={true} 속성을 사용하여 다중 선택이 가능하게 설정된다.
• value={selectedOptions}로 선택된 값들을 상태인 selectedOptions에 바인딩한다. 이로 인해 상태가 변경될 때마다 선택한 항목이 자동으로 업데이트된다.
• onChange={handleChange}로 사용자가 선택을 변경할 때마다 handleChange 함수가 호출된다.
• fruits.map()을 사용하여 fruits 배열의 각 항목을 <option>으로 렌더링한다. 각 option은 key={index}와 value={fruit}를 설정하여 고유한 값을 갖게 된다.

5. 선택된 과일 표시

<p>선택된 과일: {selectedOptions.join(", ")}</p>

 

• selectedOptions.join(",")를 사용하여 선택된 과일들을 문자열로 합친다. 각 과일은 쉼표로 구분된다.
• 이 값을 <p>태그 내에표시하여 사용자가 선택한 과일 목록을 화면에 출력한다.