개발

[ReactNative] FormData 전송하기(1)

2023년 12월 23일

안녕하세요, Team.Petmory의 프론트엔드 황주희입니다.

저는 오늘 포잇 서비스에서 팀 생성 파트를 개발하며, FormData를 통해 데이터를 전달한 경험을 공유하고자합니다.

저희 팀에서 FormData를 활용한 방법을 소개하기 전에,

기본적으로 FormData란 무엇인지, 메서드, 장단점에 대해 소개하겠습니다.

FormData란?

: HTML 폼 요소의 데이터를 쉽게 수집하고, JavaScript를 사용하여 해당 데이터를 가공하고 전송할 수 있게 해주는 객체

  • 주로 파일 업로드와 같이 다양한 형태의 데이터를 서버로 전송할 때 활용

  • HTML5의 <form> 태그이용해 input 값을 서버에 전송하는 것처럼, 자바스크립트에서 FormData() 클래스를 이용해 스크립트로 전송

  • HTML Submit: Ajax를 통해 서버에 제출

    • Ajax란?

      : Asynchronous JavaScript and XML

      말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법

  • 객체 생성 후 사용 가능

    let formData = new FormData();


FormData METHOD

  1. 데이터 추가

    1. append

    • formData에 단순한 정보를 넣는 경우

      name: 속성, value: 입력값 추가

    formData.append(name, value) formData.append('groupName', 'petmory') 
formData.append('groupName', 'pawith')

    • formData에 파일을 넣는 경우

      name: 속성, blob: 파일객체, fileName: 파일이름 추가

    formData.append(name, blob, fileName) const blob = new Blob([JSON.stringify(dataObj)], { // 객체를 json 타입으로 변환하는 경우 type: 'application/json', }) formData.append('groupName', blob, 'petmory')

    → blob이란?

    : Binary Large Object

    바이너리 형태로 큰 객체를 저장.

    ex) 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체

    • blob에 대해서는 다음 블로그에서 더 자세히 다루겠습니다

    1. set

    : append 함수처럼 필드를 추가

    → 기존 key가 있으면, 그 key 값을 모두 덮어씌운다는 점에서 차이!

    formData.set(name, value) fromData.set(name, blob, fileName) formData.append('item', 'hi') formData.append('item', 'hello') // append의 경우 ['hi', 'hello'] formData.set('item', 'hi') formData.set('item', 'hello') // set의 경우 hello

  2. 데이터 조회

    1. get

    : 주어진 name을 가진 필드의 첫번째 value 반환

    1. getAll

    : 주어진 name을 가진 필드의 모든 value 반환

    1. has

    : 주어진 name에 해당하는 필드가 있는지를 boolean 값으로 반환

    formData.get(name) formData.get('groupName') // petmory formData.getAll(name) formData.getAll('groupName') // ['petmory', 'pawith'] formData.has(name) formData.has('groupName') // true formData.has('petmory') // false

  3. 데이터 제거

    • delete

      : 주어진 name을 가진 필드 제거

    formData.delete(name) formData.delete('groupName')


FormData의 장단점

  • 장점

    • Binary 데이터를 직접 전송할 수 있으므로 용량이 적고 빠름

    • 파일 업로드, 멀티파트(form-data) 형식의 데이터 전송 지원

    • 비동기식으로 여러 데이터 필드와 파일을 함께 전송 가능

  • 단점

    • 텍스트 데이터 형식이 아니므로 순수한 Binary 데이터만 전송하는 것이 어려움

    • 필드 이름과 값을 설정해야 하기 때문에 구조가 복잡함


포잇을 개발하며 formData를 처음 사용해보아서 formData에 대한 기본 개념을 정리해보았습니다. 이렇게 개념을 이해하는 것은 쉽지만, 실제 상황에 적용하는 것은 늘 어렵더라구요! 다음 포스팅에서는 포잇 앱 개발 과정에서 formData를 활용하여 데이터를 전송한 방법에 대해 소개하겠습니다. 많은 관심 부탁드려요!