[JS] new FormData()

1. 글을 쓰는 이유

웹 애플리케이션을 개발하다가 API를 통해 서버와 통신해야 할 경우가 생겼다. RESTful API의 POST요청으로 DB에 새로운 정보를 저장해야 했다. 따라서 axios 통신 모듈을 사용하여 객체 형태의 정보를 POST요청 하였다. axios.post()의 인자로 객체 데이터를 그대로 넘겨주는 형식으로 여태 코딩을 해왔는데, WEB API로 제공하는 FormData()를 알게 되어 기록한다.

2. 기존 사용 방식

기존에 필자가 사용하던 방식은 이렇다.

addInfo = ({name, age}) => {
  return axios.post(url, {name, age})
}

addInfo({name:"홍길동", age:15}).then(...).catch(...)

또는, 데이터를 임시 변수에 저장하고 그 임시 변수를 넘겨주었다.

addInfo = ({name, age}) => {
  return axios.post(url, {name, age})
}

let tempData = {name:"홍길동", age:15};
addInfo(tempData).then(...).catch(...)

3. FormData()

더 간단하고 명료한 FormData() 사용법을 알아보자.

addInfo = ({name, age}) => {
  return axios.post(url, {name, age})
}

let formData = new FormData(); // 빈 객체를 만듦.
formData.append("name", "홍길동"); // key: name value: '홍길동'
formData.append("age", "15") 

addInfo(formData).then(...).catch(...)

제공하는 API를 이용하여 객체를 만드니까 더 직관적이고 명료하다.

정리하면, new FormData()를 통해 빈 객체 데이터를 만들어낼 수 있고, append()를 통해 key값과 value값이 있는 객체 데이터를 추가할 수 있다.👍