Next.js_21_클라이언트에서 데이터 주고 받기

지원·2023년 12월 22일

Next.js

목록 보기
21/22
post-thumbnail

클라이언트에서 데이터 주고 받기

상품 상세 페이지에서 데이터를 추가할 수 있는 입력폼을 추가하겠다.
데이터를 주고 받는 시나리오.


formValue라는 State를 만들었고
handleChange와 InputChange함수에서 input을 수정할 때마다
State값을 바꾸고

handleSubmit이라는 함수에서 formValue에서
새로운 sizeReview값을 만들고
데이터를 생성한다.

리퀘스트는 axios 인스턴스를 가지고와서 POST 리퀘스트로 보낼 것이다.
이 때 리스폰스로 생성된 데이터를 받아오기 때문에
이 값을 활용해서 추가적인 GET 리퀘스트를 보내지 않고
화면을 곧바로 업데이트할 것이다.

페이지 컴포넌트의 prop으로 데이터(sizeReviews)를 넘겨주고
이 prop을 그대로 사용하는 것이 아니라
State의 초기값으로 활용해보자

sizeReviews State를 만들고 여기에 초기값으로 initialSizeValue값을 넣는다.

handleSubmit함수에서는 리퀘스트를 보내고
setSizeReviews State에 반영해주겠다.

참고)
이 함수는 비동기함수이므로
setter함수를 함수형태로 작성해야한다.

새로 받아온 데이터는 앞에 놓고
기존 데이터는 뒤에 놓는다.

0개의 댓글