Day 12 Mission

과제) 배달 음식 주문 페이지 업그레이드하기!

이번 과제는 Day 11에서 만들어 본 "배달 음식 주문 페이지"를 업그레이드 해 보는 과제입니다.
아래 미션 소개 섹션에 안내되어 있는 순서에 따라 진행하세요

미션 소개

1. State 하나로 합치기

const [menu, setMenu] = useState(""); // 메뉴
const [address, setAddress] = useState(""); // 주소
const [request, setRequest] = useState(""); // 요청 사항

위 3개의 State를 객체 형태의 하나의 State로 합쳐보세요

2. 이벤트 핸들러 하나로 합치기

메뉴 수정, 주소 수정, 요청사항의 수정은 동일한 방식으로 동작합니다. 하나의 State로 관리하는 방식에 맞게 이벤트 핸들러 함수를 하나의 함수로 합쳐주세요

3. Ref로 배달 주소 입력 강제하기

useRef 훅을 사용해 Reference 객체를 만들면 특정 DOM 요소에 접근하는게 가능합니다.

이를 통해 보통 입력이 강제되어야 하는 폼(Input 등)에 사용자가 아무런 데이터도 입력되지 않았을 때 해당 폼(Input 등)을 Focus 하곤 합니다.

useRef를 활용해 주문 완료 버튼이 클릭되었을 때 다음 기능을 추가하세요

• 사용자가 주소를 입력하지 않았을 경우 해당 입력폼을 Focus 합니다.
• Focus 이후 alert는 호출되지 않도록 합니다.

답안

// 1. state 하나로 합치기

const [state, setState] = useState({
  menu: "",
  address: "",
  request: "",
});

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

return (
  <div>
    <select name="menu"  value={state.menu} ... >
    // ...
    </select>
    <input name="address" value={state.address} ... />
    <textarea name="request" value={state.request} ... />
  </div>
)

// 2. 이벤트 핸들러 하나로 합치기

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

  setState({
    ...state,
    [name]: value,
  });
};

// 3. Ref로 배달 주소 입력 강제하기

const addressRef = useRef();

const onSubmit = () => {
  if (addressRef.current.value === "") {
  addressRef.current.focus();
  return;
  }
}

return (
    // ...
    <input name="address" value={state.address} ref={addressRef} ... />
    // ...
)