저번 시간에 결제 양식을 완성했습니다
이제 이번 시간에는
양식을 제출하도록 하겠습니다
즉 이 결제요청을 백엔드로 보내서
백엔드로 주문을 하는 것입니다
물론 양식 요소는 이미 있습니다
이미 배우신 대로, 제출 기능은
보통의 경우 간단합니다
바로 onSubmit 이벤트 속성을 양식 요소에 더하는 것입니다
그 후에는 함수를 하나 설정하는데
이름은 handleSubmit으로 하겠습니다
이 함수가 속성과 연결되면
이 속성으로 값을 전달할 수 있게 됩니다
이전에 양식을 다룰 때 배우셨던 것처럼
양식 제출에 있어서는
표준 양식에 표준 버튼을 사용할 경우에는
브라우저가 직접 HTTP 요청을 만들어서
이 내용을 전달해 줍니다
하지만 이 내용이 백엔드로 가지는 않습니다
우리는 백엔드에서 받아야 하는데
브라우저는 백엔드에 대해서 알지 못하기 때문입니다
이 과정이 독립적이므로
인터넷의 한 독립적인 서버에서 일어나기 때문입니다
브라우저는 해당 요청을
그 웹사이트를 만드는 개발 서버로 보내게 되는데
즉 프론트엔드입니다
하지만 이 서버와 웹사이트는
이런 요청을 처리할 준비가 되지 않았습니다
그러므로 여기서 할 작업은
이런 표준 방식을 사전에 막겠습니다
이미 배우신 대로 이 작업은
preventDefault를 표준 이벤트 객체로 호출하면 됩니다
이 내용은 이벤트를 제어하는 함수에서
자동으로 받는 것입니다
즉 리액트가 전달하는 내용입니다
prevendDefault라는 이 메소드를 호출함으로써
이 요청이 다른 경우라면
생성된 뒤 전달이 되겠지만
이 메소드가 그것을 막게 됩니다
그러므로 이제 양식이 제출될 때 자동으로 진행되는
내용에 대한 통제권이 생겼습니다
이제 여기에서 작업해야 할 첫 번째 일은
입력값의 유효성이 검증되므로
값이 없는 빈 양식은 제출되지 않도록 하고
또 해야 하는 두 번째 일은
입력된 값을 저장하는 것입니다
입력값을 검증하기 위해서
입력 필드에 required 속성을 더하겠습니다
이제 이대로 저장 후
결제창으로 넘어가 보겠습니다
그리고 값이 없는 빈 양식을 제출하려고 해 보겠습니다
그러면 이런 에러 메시지가 뜨게 됩니다
즉, 이 부분은 제대로 작동합니다
이 문제에 대해서는 걱정할 필요가 없습니다
물론 여기에서 할 수 있는 작업은
자바스크립트가 유효성 검증을 하는 커스텀 테스트를 만드는 것인데
이 부분은 이전에 양식을 다룰 때 설명을 드렸습니다
하지만 여기에서는 이대로 두겠습니다
즉 첫 번째 작업이 벌써 끝났습니다
이제 입력값을 추출하기 위해서는
몇 가지 방식이 있습니다
먼저 각 입력에 상태값을 더하거나
모든 입력에 결합된 상태 객체를 더해서
onChange 속성을 사용해
키보드를 누를 때마다 상태를 업데이트할 수 있습니다
이 작업은 특히 유효성 검증 단계에서
키보드를 누를 때마다 검증을 수행하고 싶다면
이 방식으로 작업해야 합니다
이 방법 외에는 참조(ref)를 사용하면 되니다
네이티브 입력 필드와 아까 만든 양식 사이에
커스텀 컴포넌트가 있기 때문에
이 내용을 선행 참조로 감싸야
참조를 사용할 수 있습니다
하지만 제 경우에는
브라우저가 제공하는 내장 기능을 사용하겠습니다
여기에 양식 데이터에 대한 객체를 만들어서
event.traget, 즉 양식 요소를 전달하면
최종적으로 브라우저가 제어하고 있는
기본 객체가
이 요소를 FormData 생성자 함수로 전달합니다
이제 반환받는 것은 작업을 쉽게 만들어 주는
한 객체인데
사용자가 작성한 입력값을 저장할 수 있게 해 줍니다
여기서 중요한 것은 입력에 name이라는 속성이 있는데
이 부분은 필수적입니다
이렇게 해야 다양한 입력 필드를 이름으로 구분해서 접근하고
사용자가 각각에 작성한 값을 추출해 올 수 있습니다
이미 배우신 대로 get 메소드를 사용하면
이름에 대한 값을 받을 수 있습니다
즉 필드에 작성된 값을 받을 수 있습니다
혹은 양식에 대해 다룰 때 배우셨듯이
이 FormData 객체를 변환하여
더 단순한 자바스크립트 객체로 만들어서
양식의 각 입력값이
속성 이름으로 표현되고
입력된 값은 해당 속성의 값이 되는데
Object.fromEntries를 사용해서
이와 같은 유형 데이터 입력을 전달함으로써 가능합니다
이렇게 하면 객체를 받게 되는데
이 객체에서, 예를 들면 이메일 속성에
사용자가 입력한 값을 받아올 수 있습니다
모든 입력 필드에 이렇게 키와 값 쌍을 받아올 수 있습니다
이렇게 하면 간편하게 사용자가 입력한
데이터를 받아올 수 있습니다
이제 바로 이 데이터를
백엔드로 보내야 합니다
이 데이터는 장바구니 데이터와 합쳐야 하는데
그 이유는 백엔드로 보내는 주문에
결제를 위한 내용과 더불어서
주문한 메뉴 정보도 있어야 하기 때문입니다
이것이 이 부분의 마지막 작업이 되겠습니다
이 HTTP 요청을 백엔드로 보내는 작업인데
이 부분을 다음 시간에 함께 해 보겠습니다