React 데이터 보내기

json vs formData

fetch할 때 리퀘스트 바디에 구조화된 데이터를 보낼 때는 json 데이터로 보내주고, 파일 업로드가 필요한 경우에는 formData 객체를 사용하는 것 같다.

// json
const signData = {
  email: email.value;
  password: password.value}

const data = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(signData),
};


// formData
const formData = new FormData();
formData.append("email", email.value)
formData.append("password", password.value)
formData.append("profileImage", profileImage.value)

const data = {
  method: "POST",
  headers: {
    "Content-Type": "multipart/form-data",
  },
  body: formData,
};

 

리스폰스 데이터 반영

(handleSubmit 함수를 만들어서 내려보내는 것과, setValue 함수를 통채로 내려보내는 것 중에 어느 쪽이 더 권장되는가?)

데이터 POST에 성공하면 서버로부터 리스폰스 바디에 어떻게 서버에 반영되었는가 하는 데이터가 같이 딸려서 돌아온다. 이 데이터를 사용하여 item state를 변경해주면 된다. 비동기로 진행되니까 React 데이터 가져오기에서 설명한 것처럼 setter 함수에 콜백 함수를 물려서  state를 업데이트하자.

 

데이터 수정

데이터 수정이 어디서 이루어지는지에 따라서 방법이 조금씩 달라질 것 같다. 일단 당장 생각나는 것은 1) 모달창에서의 데이터 수정 2) 새로운 페이지에서의 데이터 수정 3) 현재 페이지의 같은 위치에서 데이터 수정 이렇게 세 가지인데, 어떤 방법을 쓰던 수정할 초기값이 있어야 하기 때문에 그걸 어떻게 전달할지에 대해서 고민해봐야 할 것 같다.

현재 페이지의 같은 위치에서 데이터를 수정하는 방식은 [ 수정 ] 버튼을 클릭하면 state가 바뀌며 다시 랜더링되는 방식으로 진행하게 된다. 수정 버튼을 누르면 edit state에 id를 저장해주고, map을 돌릴 때 item.id와 edit의 값과 같으면 수정 form의 형태로 그놈만 핀포인트로 변경해주는 식이다. 취소 버튼을 누르면 edit state만 빈 문자열이나 null로 바꿔주면 되는 거고, 확인 버튼을 누르면 Patch 해주고 response.ok 떨어지면 아래의 함수를 통해 기존 items state를 수정해주는 식으로 짤 수 있겠다.

const handleUpdateSuccess = (newItem) => {
  setItems((prevItems) => {
    const splitIdx = prevItems.findIndex((item) => item.id === newItem.id);
    return [
      ...prevItems.slice(0, splitIdex),
      newItem,
      ...prevItems.slice(splitIdex + 1),
    ]
  })
}

 

데이터 삭제

수정보다 삭제가 더 간단한 거 같다. 그냥 삭제 버튼 만들어서 api 연동해놓고, response.ok 뜨면 filter로 현재 item 에서 특정 id만 제외하고 state 업데이트 해주면 되지 않을까? 그런 함수는 대충 아래와 같이 짤 수 있을 것 같다.

const handleDelete = (deletedItem) => {
  setItems((prevItems) => prevItems.filter((item) => item.id !== deletedItem.id))
}