앞에서 수정 버튼을 눌렀을 떄 입력폼이 나오도록 했다.
리뷰 수정 api를 연동하기
ReviewForm 파일을 살펴보면
똑같은 입력폼을 써서 글을 작성하거나 수정하지만
ReviewForm 컴포넌트 입장에서는 이게 작성하는 상황인지 수정하는 상황인지 알 수 없다.
대신 상위 컴포넌트 ReviewList에서는 ReviewForm이
어떤 상황에 쓰이고 있는지 알 수 있다.
그래서 prop을 활용해서 상황에 따라 다른 api 함수를 넘겨줄 것이다.
일단 기존에 잘 동작하던 기능은 유지한 채로
다른 api함수를 사용할 수 있도로 바꿀 것이다.
ReviewForm.js에서 onSubmit이라는 prop을 추가해준다.
이 prop을 사용해서 네트워크 리퀘스트를 보내는 함수를 받아와서
기존에 사용하던 createReview함수를 대신해준다.(ctrl + f)를 눌러 createReview 함수를 찾고 onSubmit으로 교체
이렇게 prop만 다르게 내려주면 글 생성과 수정에 모두 활용할 수 있다.
마찬가지로 onSubmitSuccess함수는 네트워크 리퀘스트가 성공했을 떄
실행되는 함수인데 글 수정이 완료되었을 때에도
마찬가지로 실행해주면 리스폰스가 도착한 데이터를 반영할 수 있다.
그리고 App컴포넌트에서는 ReviewForm 컴포넌트에 onSubmit prop으로 createReview함수를 넘겨주고
handleSubmitSuccess함수는 handleCreateSuccess라고 이름만 바꾸어 준다. (F2)
저장하고 확인해보면 글 작성이 잘 이루어진다.
수정 api를 연동하기 전에 테스트해보기
console 창에
const formData = new FormData();
수정할 값만 append 해준다.
formData.append('title', '수정됨');
리퀘스트를 보낼 때 주소 뒤에다가 (/아이디값)을 적어줘야 한다.
어떤 리뷰를 수정할 지 주소를 적어주는 것.fetch('https://learn.codeit.kr/0633/film-reviews/44', {method: 'PUT', body: formData});
(적당한 아이디를 골라서 넣어준다)
확인해보면 reponse로 수정이 반영된 데이터가 잘 오는 것을 확인할 수 있다.
새로고침하면 수정한 데이터가 잘 반영되어 보여진다.
이것을 바탕으로 api 리퀘스트를 보낼 함수를 추가하기
api.js로 가서 updateReview함수를 만든다.
파라미터로 id값을 추가로 받아야 한다.
주소도 /${id}값을 추가해서 어떤 리뷰를 수정할 지 서버에 알려주는 용도이다.그리고 method로는 수정을 의미하는 'PUT'을 넣어준다.
App 컴포넌트 수정하기
App 컴포넌트를 보면 글을 불러오고 생성하는 것은
모두 App컴포넌트에서 실행하고 있다.
마찬가지로 수정하는 것도 items State가 있는 App 컴포넌트에서 해주면 된다.
handleUpdateSuccess라는 함수를 만든다.
이 함수에서는 리뷰를 수정한 다음에 리스폰스로 도착한 데이터를 반영할 것이다.
review를 파라미터로 받아서 items State를 변경하는데수정할 item에 해당하는 인덱스를 찾은 다음에 prevItems State배열에서
같은 아이디에 해당하는 리뷰를 찾아서 갈아끼워준다.
그리고 updateReview 함수와 handleUpdateSuccess를
ReviewList에 prop으로 내려준다.
이 함수들은 최종적으로 ReviewList 안에 있는 ReviewForm에서 실행될 것이다.
ReviewList 컴포넌트에서는 onUpdate와 onUpdateSuccess를 받아서 사용할 것이다.
ReviewForm 컴포넌트에서 사용하는 형태의 함수를 만들고
ReviewForm 컴포넌트에 맞게 함수를 만들어 줄 것이다.
우선 handleSubmit이라는 함수를 만들 것이다.
이 함수는 ReviewForm에서 확인버튼을 눌렀을 떄 formData로 실행할 것이므로
파라미터로 formData를 추가해준다.
글을 생성할 때와는 다르게 수정할 때 사용하는 onUpdate함수가
id값을 받는다는 것item에서 id값을 추가로 destructuring 하고
이 값을 formData랑 같이 넘겨준다.
handleSubmitSuccess라는 함수에서는 파라미터로 받은 review값을
onUpdateSuccess에 넘겨주고
입력폼을 닫아주기 위해서 edittingId State를 null 바꾸어 줄 것이다.
그리고 ReviewForm에 prop으로 넘겨준다.
저장하고나서 확인해보면
값을 바꾸고나서 확인버튼을 누르면 네트워크 리퀘스트를 잘 보내고
리스폰스도 화면에 잘 반영되는 것을 확인할 수 있다.
