데이터 객체로 저장해서 서버로 전송하기

게시글이나... 여러가지 상황에서 데이터를 객체로 저장해 서버로 전송하거나 json 파일을 변경하는 등의 작업이 거의 모든 개발에서 나오기 때문에 만들어보았다.

일단 나는 리뷰를 남기는 모달창으로 리뷰 데이터를 서버로 올리는걸 구현했다.

  const [reviewCounts, setReviewCounts] = useState({
    name: "",
    address: "",
    price: 0,
    feel: 0,
    taste: 0,
    Plating: 0,
    recomm: 0,
  });

객체 형식을 지정해준 뒤 props로 setReviewCounts를 변경값이 있는 컴포넌트로 넘겨주었다 .

          <Address setReviewCounts={setReviewCounts} setButton1={setButton1} />
           <ReviewAll
            setReviewCounts={setReviewCounts}
            setButton2={setButton2}
          ></ReviewAll>

button1과 2는 이전에 작업한 유효성 검사이다.

Address 내부로 들어가게 되면

    setReviewCounts((prevCounts) => ({
      ...prevCounts,
      name: detailAddress,
      address: allAdress,
    }));

이 코드를 useEffect 내부에 넣어준다.

detailAddress 와 allAdress는
이전에 지정해두었던 input value 이다

따라서 input 값에 따라 객체로 들어가는데이터가 변경된다

console.log 예시

이제 데이터는 reviewCounts 에 모두 들어갔기 때문에 post로 전송만 해주면 된다.

post는 다음에...