new FormData는 <form> submit과 다를까?

리액트에서 장고 서버에 csrf토큰을 보내줘야 했는데

submit이 아니라 axios로 직접 보내주고 싶었다

(리액트에서  csrf토큰을 넣는 건 쿠키에서 파싱해서 인풋 태그에 넣는 방식으로 해결했다)

 

인터넷에서 찾아서 나름 조치를 취해서 보냈는데 토큰이 가지 않아서

form submit으로 보내니 갔다

 

FormData가 form처럼 데이터를 보내는 형식인 줄 알았는데 아니었던 걸까?

같은 형식인 건 맞다

하지만 내가 csrf토큰을 첨부하는 것에 대해 오해하고 있었서 다른 결과가 나왔다

헤더에 설정을 해주면 된다고 해서 그걸로 끝인 줄 알았는데 그게 문제가 아니었다

 

 <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken}/> 

이게 form 태그에 csrf토큰이 첨부될 때의 모습이다

그러면 이 csrf토큰을 직접 FormData에 추가해줘야 했다(submit이면 알아서 추가가 되지만..)

 

그리고 그 동안은 항상 직접 FormData에 데이터를 추가해주기만 했는데

이번에 찾아보면서 form 엘리먼트를 넣어서 생성하면 자동으로 내부 데이터가 추가된다는 것을 알았다

 

FormData 다루기

const formElement = document.getElementById('myForm'); 
// <form id="myForm">

const filledFormData = new FormData(formElement);

const emptyFormData = new FormData();

filledFormData처럼 formElement를 넘겨주면 form#myForm의 인풋 데이터가 설정된 FormData가 만들어진다

emptyFormData처럼 만들면 하나씩 데이터를 추가해줘야 한다

 

const formData = new FormData();

formData.append('username', 'tester01');

formData.append('email', 'abc@test.com');

여러 데이터를 하나의 append로 추가할 수는 없고 하나씩 추가해줘야 한다

 

파일 추가도 가능하다

const fileInput = document.getElementById('fileInput');

const file = fileInput.files[0];

formData.append('file', file);

 

데이터 값이 배열인 경우에는 키 값을 동일하게 둔 append문을 여러개 쓰면 된다

const genre = ['classic', 'R&B', 'hiphop'];

for (var i = 0; i < genre.length; i++) {

  formData.append('genre', genre[i]);
  
}

 

특정 값을 지우고 싶은 경우에는 키를 넣으면 된다

formData.append('username', 'johnsmith');

formData.delete('username');

 

 

csrf토큰 추가는 어떻게 해야 했던 걸까?

csrf토큰도 그냥 인풋이라서 똑같이 더해주면 된다

formData.append('csrfmiddlewaretoken', csrf_token);