[React Native] RN에서 axios로 formData 전송하기

formData는 우리가 HTML에서 form 태그를 사용하여 input 값을 서버에 전송하는 것 대신, 자바스크립트 단에서 폼 데이터를 다루는 객체이다. 주로 일반 데이터 말고 이미지 파일을 서버에 전송해야 할 때 formData를 사용하게 된다. RN으로 앱을 개발하던 중 리뷰 작성을 구현하기 위해 이미지 업로드 기능이 필요했다. 이때 formData를 사용했다. formData에 데이터를 저장하는 방법은 아래와 같이 append를 사용하면 된다.

const formData = new FormData();

formData.append('rate', rating);
formData.append('contents', message);
formData.append('matchingId', matchingId);
imageFiles.forEach(e => {
  formData.append('images', {
    name: e.filename,
    type: 'image/jpeg',
    uri: e.path,
  });
});

 

이때 마지막에 추가해준 images 부분을 보면 React Native에서 이미지 파일을 formData에 담는 방법을 알 수 있는데, name, type, uri로 이루어진 객체 형태로 저장해야한다. name과 type은 서버에서 다시 처리가 되기 때문에 크게 중요하지 않지만, uri를 잘못 전송하게 되면 제대로 동작하지 않는다.

 

아무튼 이렇게 formData에 필요한 데이터를 담고 axios를 사용하여 서버로 전송하는 코드를 작성했다.

 

axios
  .post(url.dev + 'reviews', formData, {
    headers: {
      'Content-Type': 'multipart/form-data; boundary="boundary"',
      Authorization: `Bearer ${auth.token}`,
    },
  })
  .then(
    ~~~
  )
  .catch(
    ~~~
  )

그러나 에러가 발생했다. 데이터도 모두 잘 담겨있는 것을 로그로 확인했고, jwt token도 잘 담겨있는데도 서버로 전송되지 않았다. 계속해서 검색을 해 본 결과, axios가 formData를 전송할 때 문자열로 바꿔버린다는 것을 알게 되었다. 따라서 서버로 전송할 때 데이터를 어떻게 처리할 지를 정할 필요가 있었는데, 바로 transformRequest를 명시해주면 된다.

axios
  .post(url.dev + 'reviews', formData, {
    headers: {
      'Content-Type': 'multipart/form-data; boundary="boundary"',
      Authorization: `Bearer ${auth.token}`,
    },
    transformRequest: (data, headers) => {
      return data;
    },
  })

이렇게 data를 그대로 리턴해줌으로써 문제를 해결했다!