Day 11 Mission

과제) 배달 음식 주문 페이지 만들기 만들기

이번 과제는 React.js를 사용해 아주 아주 심플한 배달 음식 주문 페이지를 만들어 보는 과제입니다.
강의중에 소개하는 State, 이벤트 핸들링, State로 사용자 입력 관리하기 개념이 꼭 필요합니다.
아래 미션 소개 섹션에 안내되어 있는 순서에 따라 진행하세요

미션 소개

OrderEditor 컴포넌트 구현하기

OrderEditor 컴포넌트는 다음 그림처럼 배달 음식 주문을 위해 사용자의 입력을 받는 역할을 합니다. (UI를 위한 코드는 모두 제공되니 직접 UI를 구현하시지는 않아도 됩니다.)

다음 요구사항을 만족하도록 OrderEditor 컴포넌트를 생성하세요

1. 3개의 입력 폼(메뉴, 주소, 요청사항)에 사용자가 입력한 값을 State에 보관합니다.

   • useState를 이용해 각각의 입력을 저장하기 위한 3개의 State를 생성합니다.
     • menu : 메뉴를 저장하기 위한 State
     • address : 배달 주소를 저장하기 위한 State
     • request : 배달 요청사항을 저장하기 위한 State
   • 각 input, select 태그에 value와 onChange 속성을 설정합니다.

2. 컴포넌트 리턴문 최 하단의 주문 완료 버튼이 클릭되면 사용자가 입력한 값을 alert로 출력합니다.

   • 버튼태그의 onClick 이벤트 핸들러 함수 onSubmit을 만듭니다.
   • onSubmit 함수 내부에서 alert 메서드를 이용해 현재 State에 보관된 값을 출력합니다.

답안

export default function OrderEditor() {
  const [menu, setMenu] = useState("");
  const [address, setAddress] = useState("");
  const [request, setRequest] = useState("");

  const onChange = (e) => {
    const { target: { name, value }, } = e;

    if (name === "menu") setMenu(value);

    if (name === "address") setAddress(value);

    if (name === "request") setRequest(value);
  };

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

  return (
    <div>
      <h2>배달의민족 주문</h2>
        <select name="menu" onChange={onChange}>
          // ...
        </select>
        <div>배달 주소</div>
        <input name="address" onChange={onChange} />
        <div>배달 요청사항</div>
        <textarea name="request" onChange={onChange} />
        <button onClick={onSubmit}>주문 완료</button>
    </div>
  );
}