앞에서 리뷰를 생성하는 api를 연동해보았는데
확인버튼을 누르는 순간 리뷰를 생성하면
화면에 곧바로 반영이 되지않는 문제점이 있었다.
api에서는 리뷰생성에 성공하면 성공한 데이터를 보내준다.
이것을 활용하면 새로고침없이 화면에 반영해 줄 수 있다.
response 데이터 곧바로 반영하기
App 컴포넌트를 확인해보면
현재 화면에 나오는 리뷰 목록은 App 컴포넌트에 items State로 관리되고 있다.
리뷰 생성을 하고 받은 response 데이터를 이 items State에 추가해주면
별도로 request를 하지않아도 리뷰목록을 업데이트할 수 있다.
그래서 받아온 response를 사용하기위해서 ReviewForm컴포넌트에다가
새로운 prop을 추가해준다.
onSubmitSuccess라는 prop을 추가해준다.
handleSubmit 함수에서
받은 response를 가지고
onSubmitSuccess에다가 넘겨준다.
App컴포넌트에서는
handleSubmitSuccess라는 함수를 만든다.
이 함수는 리퀘스트이후에 비동기로 실행되는 함수이다.
review를 파라미터로 받아서 Items State를 변경하는데(비동기함수에서 이전 State 값을 참조하려면 반드시 콜백형태 작성해야한다.)
그래서 prevItems를 가지고 파라미터로 받아온 review를 추가해준다.
handleSubmitSuccess 함수는 ReviewForm 컴포넌트에
onSubmitSuccess prop으로 내려준다.
정리해보기
ReviewForm 컴포넌트에서 확인버튼을 누르면 handleSubmit함수가 실행되고
여기서 리뷰 생성을 하는 리퀘스트를 보낸다.
result = await createReview(formData);
리퀘스트가 성공하면
response 데이터를 가지고 onSubmitSuccess 함수가 실행된다.
이 함수는 App 컴포넌트에서 props로 내려준 handleSubmitSuccess 함수로
파라미터로 새로 만들어진 review를 받아서 이렇게 items State에 맨 앞에다가 추가해줌
이 동작은 비동기로 일어나므로 반드시 콜백형태로 사용하였다.
확인해보면 리뷰를 작성하자마자 새로운 글이 잘 보이게 된다.
