다중 Select 요소의 효과적인 상태 관리

React에서 여러 select 요소를 사용하는 폼을 만들 때, 각각의 요소를 구별하고 그 상태를 효율적으로 관리하는 방법이 중요합니다. 이를 위해 각 select 요소에 name 속성을 사용하는 방법을 소개합니다.

예제: 간단한 설문 조사 폼
설문 조사 애플리케이션을 예로 들겠습니다. 사용자는 여러 질문에 대한 답변을 select 요소를 통해 선택할 수 있습니다.

function SurveyForm() {
  const [responses, setResponses] = useState({
    favoriteColor: "",
    preferredPet: "",
    hobbyInterest: ""
  });

  function handleSelectChange(event) {
    const { name, value } = event.target;
    setResponses(prevResponses => ({
      ...prevResponses,
      [name]: value
    }));
  }

  // 렌더링 로직
}

function QuestionSelect({ question, name, options, selectedValue, onChange }) {
  return (
    <div>
      <label>{question}</label>
      <select name={name} value={selectedValue} onChange={onChange}>
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
}

SurveyForm 컴포넌트는 favoriteColor, preferredPet, hobbyInterest라는 세 개의 상태를 가지고 있습니다.
각 select 요소는 고유한 name 속성을 가지고 있으며 ("favoriteColor", "preferredPet", "hobbyInterest"), 이는 상태 관리에 사용됩니다.
handleSelectChange 함수는 이벤트 객체에서 name과 value를 추출하여 상태를 업데이트합니다. 이 방식을 통해 어떤 select 요소가 변경되었는지 쉽게 식별할 수 있습니다.
QuestionSelect 컴포넌트는 재사용 가능하며, 각 질문에 대해 다른 옵션을 표시할 수 있습니다.
결론
select 요소에 name 속성을 사용하는 것은 React에서 여러 입력 요소를 관리할 때 매우 유용합니다. 이 방법은 코드의 명확성을 높이고, 유지보수를 용이하게 하며, 확장성을 제공합니다.