입력폼에 onSubmit함수에다가 Review 생성 api를 연동하기
개발자도구에서 api를 테스트해보기
전송할 데이터를 만든다.
FormData라는 것으로 데이터를 만든다.
우리가 사용할 api에서는 파일 업로드를 편하게 하려고 폼 데이터형식을 받기 때문에사용하는 것이다.
formData 생성자로 변수를 하나 만들고
여기다가 append함수로 작성해준다. key와 value를 넣어준다
이것을 fetch로 보낸다.
fetch로 두번째 아규먼트에 옵션을 지정할 수 있다.
대문자 'POST'를 넣어주고
body에다가 formData를 넣어준다.
입력하고 네트워크 탭에서 확인해보면
데이터가 잘 보내진 것을 확인할 수 있다.
Request Header를 보면
content 타입이 multipart/form-data로 설정된 것을 확인할 수 있다.
response body도 확인해보면
앞에서 전송한 데이터를 가지고 서버에서 새 review를 만든 다음
review 프로퍼티에다가 이렇게 만들어진 객체를 보내주었다.
새로고침을 해보면 잘 적용된 것을 확인할 수 있다.
(이미지는 따로 파일을 전송하지 않아서 보이지 않는 것이 정상)
api.js 파일에서 createReview라는 함수를 만들어준다.
파라미터로는 formData를 받는다.
그리고 getReviews와 createReview가 불러오는 URL이 공통된 부분은
BASE_URL라는 변수로 따로 빼준다.
ReviewForm 컴포넌트에서 handleSubmit를 수정한다.
우선 async 키워드로 비동기함수로 바꾸어주고
여기서는 values 컴포넌트를 사용해서 form 데이터를 만들 것이다.
새 formData 인스턴스를 생성하고 각 필드의 값을 지정해준다.
그리고 이 값을 앞에서 만든 createReview함수로 전달한다.
그리고 리퀘스트가 끝나면 폼을 초기화해준다.
values State에 초기값으로 사용했던 값을 INITIAL_VALUES라는 변수에다가 담아준다.
이 값을 사용해서 초기화 해준다.
setValues(INITIAL_VALUES);
확인하기
내용을 다 채우고 크롬개발자도구에서 확인한다.
POST 리퀘스트가 잘 보내진 것을 확인할 수 있다.
그리고나서 새로고침을 해보면 생성한 내용이 잘 반영되어 있다.
로딩과 에러 처리하기
isSubmitting과 SubmittingError 라는 State를 만들고
try catch문으로 처리해준다.
그리고 isSubmitting State는 button에 적용시켜준다.
error 메세지도 표시해준다.
네트워크탭에서 속도를 변경하고 글을 작성해보면
로딩처리가 잘 되고
api.js에 일부러 throw new Error를 이용하여 확인하면
에러 처리도 잘 되는 것을 확인할 수 있다.
리뷰 생성하는 api연동하기
사실 데이터를 받아오는 경우와 크게 다르지 않다.
