FormData란?

앞서 정리한 Axios의 기본적인 사용법에 대한 글에 이어 이번글에서는 현재 직면한 문제인 dataform을 활용해 json객체와 이미지 파일을 동시에 서버 api로 보내는 과정에서 생기는 type 에러를 해결하는데에 있어, Axios에서 클라이언트가 서버와 http 통신을 할 때 텍스트나 이미지 파일들을 전송할 때 사용하는 데이터 구조인 FormData에 대한 개념이 부족했기에 해당 개념부터 짚고 넘어가 보자 한다.
 
 

FormData란?

FormData는 서버로 웹 form의 데이터를 쉽게 구성하여 전송할 수 있도록 도와주는 웹 API에서 사용되는 데이터 객체로, 'key'-'vlaue'로 데이터들을 관리하며,  비동기 HTTP 요청을 통해 데이터를 서버에 전송해주는 데이터 객체이다.
 
 

FormData의 특징들

 
● multipart / form-data 형식: FormData는 multipart/form-data MIME 타입을 사용하여 파일과 텍스트 데이터를 서버로 전송하며, 주로 파일을 전송해야 할 때 많이 사용되고, 텍스트 데이터와 파일을 한꺼번에 서버로 전송하는 것이 가능하다. 
 
● 이진 파일 처리: FormData는 텍스트 데이터 뿐만 아니라 파일과 같은 이진 데이터도 쉽게 처리할 수 있어 파일 데이터를 보낼 때 사용되는 File 객체 나 Blob 객체와 자주 쓰인다.
 
● 비동기 전송 용이: FormData는 XMLHttpRequest(웹 환경)나 fetch API와 함께 사용되기 때문에 비동기적으로 데이터를 서버로 전송하는 것이 용이하기에, 페이지를 새로 고침 하지 않고도 서버에 데이터를 전송하고 응답을 받을 수 있게 해 준다.
 
●  헤더 설정 불필요: FormData는 Content-Type 헤더를 따로 설정해주지 않아도 브라우저가 자동으로 적절한 Content-Type 헤더를 설정하고, multipart/form-datq형식등에 필요한 경우 멀티파트 경계 문자열(boundary)까지도 추가해 주는것이 좋다.
 (참고로 multipart/form-data는 데이터별로 Content-Type을 지정해줘야함)

●  서버 측에서 데이터관리가 용이: 서버 측에서 FormData로 전송된 데이터는 멀티파트 형식으로 수신되며, 대부분의 서버 프레임워크와 라이브러리는 이 형식을 자동으로 파싱 해주어 개발자가 쉽게 접근할 수 있는 형태로 제공해 주기에 서버 측에서 데이터를 관리하는 것이 용이해진다.

(참고로 FormData는 서버 측으로 전달할 때 내부 데이터들을 모두 문자열로 변환시킴)
 
●  console.log를 통해 객체 내용을 확인할 수 없음 : FormData는 HTTP 통신에 사용되는 특수한 객체이기에 브라우저의 보안 상 이유로 내부 데이터의 직접적인 접근을 허용하지 않아 직접적으로 console.log로 해당 객체 내부의 데이터를 확인할 수 없고, 확인이 필요한 경우 for문을 활용해 내부를 순회하며 확인해야한다.
 
 

FormData 기본 구조와 사용법

 
아래는 formData를 사용하는 가장 기본적인 형태이다.
 

const formData = new FormData();
formData.append("name", "choByeongGyu");
formData.append("age", 22);
formData.append("gender", "male");

 
 
 

1) FormData 객체를 사용하기 위해서 new생성자를 통해 선언하여 새로운 변수에 할당시켜 주기

 

 
 

2) FormData 객체는 key-value 쌍을 활용해 데이터를 저장하고 관리하기에 append 속성으로 key와 value 값을 추가해주기

 
 
 
FormData객체를 선언하고 데이터를 저장해 줬다면, 이제 실질적으로 앱 환경(React Native)에서  Axios의 FormData를 사용하여 서버에 텍스트 데이터를 보내려면 어떻게 해야 하는지 아래 예제를 통해 알아보도록 하자.
 
 

import axios from 'axios';				// axios 라이브러리 사용을 위해 import


const formData = new FormData();			// FormData 객체 생성

formData.append("name", "ChoByeongGyu");		// FormData 객체에 텍스트 데이터 추가
formData.append("age", 22);
formData.append("gender", "male");

axios({							// axios를 활용해 서버에 formData객체 전송
  method: 'post',
  url: 'http://223.130.131.166:8080/api/v1/house',
  data: formData,
  headers: {
    'Content-Type': 'multipart/form-data'		// 단일 타입의 데이터를 보낼 땐 Contet-Type은 설정안해도 됨, 여러 타입의 데이터 같이 보낼때는 멀티파트 폼 데이터 타입 설정
  }
})
.then(response => console.log("업로드 성공:", response.data))
.catch(error => console.error("업로드 실패:", error));

 
 
 
위의 예제는 axios의 formData를 활용하여 서버에 데이터를 전송하는 기본 세팅의 예제이다.
 
 
이제 기본적인 FormData 사용법에 대해 알아보았으니 현재 프로젝트 진행 중에 막혔던 부분인 이미지 파일을 React Native 환경에서 Axios FormData를 활용해 이미지 파일을 보내려면 어떻게 해야 하는지 기본 구조와 예제들을 통해 자세히 정리해 보도록 하겠다.
 
 

import axios from 'axios';					// axios 라이브러리 사용을 위해 import


const uploadImage = async (imageUri) => {			// 이미지를 FormData 객체에 추가하는 함수

const formData = new FormData();				// FormData 객체 생성
  
  formData.append('image', {					// FormData에 image 파일 추가
    uri: imageUri,						// 파일 uri 지정
    type: 'image/jpeg', 					// 파일 타입  지정
    name: 'photo.jpg', 						// 파일 이름 지정
  });	

  try {
    const response = await axios({					// axios를 사용하여 서버에 POST 요청
      method: 'post',
      url: 'http://223.130.131.166:8080/api/v1/house',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data', 			// 여러 타입의 데이터 같이 보낼때는 멀티파트 폼 데이터 타입 설정
      },
    });
    console.log('업로드 성공:', response.data);
  } catch (error) {
    console.error('업로드 실패:', error);
  }
};

 
 

1) 이미지파일을 보낼 때에도 마찬가지로 제일 먼저 FormData 객체를 사용하기 위해서 new생성자를 통해 선언하여 새로운 변수에 할당시켜 주자

 

 

2) formData.append() 함수를 사용하여 파일 데이터를 uri, type, name을 포함하는 파일 객체로 전달해줘야 해주어야하는데, 여기서 type을 이미지파일로 지정해주자.

 

이미지 파일로 지정하는 방법은 'image/ ' 뒤에 이미지파일의 MIME 타입을 지정해 주면 된다.  ex)  type: 'image/jpeg' ,  'image/png',  'image/svg+xml')
 
 
 

3) 텍스트를 보낼 때와 같은 형식으로 Axios의 POST요청을 보내주면 된다.

참고로 async, await과. then을 같이 사용하는 것보다 async와 await만을 사용하는 것이 효율적이라는 글을 보아 cosnt response = axios ~~ 의 형태로 로직을 바꾸게 되었음
 
(여기서 주의한 점은 한 개의 데이터 타입을 보내는 것이 아니라 텍스트와 이미지 파일을 동시에 보낼 때에는 'multipart/form-data'를 생략하지 말고 반드시 지정해주어야 한다는 것이.)

 
 
 
 

여기까지 FromData에 대해 정리해 보았고 다음글에서 React Native에서 지원해 주는 imagepicker에서 받아 온 이미지를 dataform에 이미지 파일형태로 추가하여 서버에 성공적으로 보내는 부분에 대해 추가적으로 정리해 보도록 하겠다.