[React] Axios로 FormData 전달하기

FormData?

FormData 클래스를 이용하면 html의 form 태그를 이용하여 보내는 데이터를 JavaScript에서 다룰 수 있다.

 

보통의 경우 JSON 구조로 데이터를 전송하므로 사용할 일이 많지는 않지만,

FormData를 이용하여 파일을 서버에 보낼 수 있다.

---

FormData() 클래스 사용법

const formData = new FormData(); // FormData 객체 선언

formData.append('key', value); // key: value 형식으로 append 가능

기본 사용법은 위와 같다.

---

React로 데이터 보내기

const imgInput = useRef(null); // Ref 선언

...

<input type="file" ref={imgInput} /> // Ref 할당

위처럼 input에 Ref를 연결해주고

const postImg = async () => {
    const formData = new FormData();
    
    formData.append('photo', imgInput.current.files[0]);
    
    axios.post('/url', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
}

axios로 post 시, config에 header 설정을 위와 같이 넘겨준다.