React로 사용자 입력 관리하기

React로 간단한 배달 음식 주문 페이지를 구현했다.
메뉴, 배달 주소, 요청사항을 입력받고 주문 완료 시 입력값을 확인할 수 있도록 만들었다.

구현 과정

마크업 구조

먼저 주문에 필요한 입력 폼들을 구성한다.

 

메뉴 선택을 위한 select,주소 입력을 위한 input, 요청사항 입력을 위한 textarea, 그리고 주문 완료 button을 배치한다.

export default function OrderEditor() {
  return (
    <div>
      <h2>배달의민족 주문</h2>
      <select>
        <option>아이스크림</option>
        <option>젤리</option>
        <option>초콜릿</option>
      </select>
      <div>배달 주소</div>
      <input />
      <div>배달 요청사항</div>
      <textarea />
      <button>주문 완료</button>
    </div>
  );
}

 

state 관리

각 입력 필드의 값을 관리하기 위한 state를 선언한다.

const [menu, setMenu] = useState("");
const [address, setAddress] = useState("");
const [request, setRequest] = useState("");

 

입력 핸들링

여러 입력 필드를 하나의 핸들러로 처리하기 위해 name 속성을 활용한다.

const onChange = (e) => {
  const { target: { name, value } } = e;
  if (name === "menu") setMenu(value);
  if (name === "address") setAddress(value);
  if (name === "request") setRequest(value);
};

• 구조 분해 할당으로 e.target에서 필요한 값을 추출하고, name에 따라 적절한 state를 업데이트한다.

 

return (
  <div>
    <h2>배달의민족 주문</h2>
    <select name="menu" onChange={onChange}>
      <option>아이스크림</option>
      <option>젤리</option>
      <option>초콜릿</option>
    </select>
    <div>배달 주소</div>
    <input name="address" onChange={onChange} />
    <div>배달 요청사항</div>
    <textarea name="request" onChange={onChange} />
    <button>주문 완료</button>
  </div>
);

• 각 입력 요소에 name과 onChange 핸들러를 연결한다.

 

주문 완료 처리

버튼 클릭 시 현재 state 값들을 alert로 표시한다.

const onSubmit = () => {
  alert(`주문이 완료되었습니다. 메뉴: ${menu}, 주소: ${address}, 요청사항: ${request}`);
};

 

그리고 버튼에 onClick 핸들러를 연결한다

<button onClick={onSubmit}>주문 완료</button>

 

정리

• name 속성을 활용하면 여러 입력을 하나의 핸들러로 관리할 수 있다.
• 구조 분해 할당으로 이벤트 객체에서 필요한 값을 간결하게 추출할 수 있다.
• Controlled Component 패턴으로 입력값의 흐름을 명확하게 관리할 수 있다.