비가 많이 오는 기념으로 오랜만에 포스팅을 해볼까 합니다. 현재 진행 중인 프로젝트에서 공유 오피스를 등록할 때 회의실 이미지와 각종 데이터들을 서버에 전송하는 데 사용할 FormData 사용법에 대해 포스팅해 보겠습니다.
<회의실 등록 페이지>
회의실 등록에 필요한 데이터를 잠시 살펴보겠습니다.
회의실 이름
자치구(지역)
회의실 상세주소
회의실 전화번호
회의실 이미지
대여료(무료/유료)
회의실 부가설명
회의실 이미지를 제외하고는 모두 input으로 입력받은 데이터를 활용하고 이미지의 경우는 파일의 형태로 전송해주면 되겠습니다. 파일 형태로 데이터를 전송하기 위해서는 FormData를 사용해야 합니다!
FormData
const formData = new FormData();- JS에서 HTML5의 form 태그 역할을 수행 -> JS 스크립트도 전송 가능하다.
- 내장객체(window.FormData)이므로 따로 설치 없이 사용이 가능하다.
- "KEY-VALUE" 구조로 데이터를 전송한다.
FormData와 form은 다릅니다!
form은 HTML5에서 사용하는 태그이고,
FormData는 JS에서 form 단위를 사용하는 객체입니다즉, HTML5에서 form 태그로 데이터를 전송하는 역할을 JS에서는 FormData로 사용이 가능합니다.
보여드릴 로직은 회의실을 등록하는데 필요한 데이터들을 FormData에 추가하고 추가된 데이터들을 form 태그에서 onSubmit 이벤트를 통해 서버로 전달하는 방식을 사용했습니다.
form 태그 안에는 데이터를 입력하는 input들이 배치되어 있습니다 등록 완료 버튼을 클릭하면 form 태그에 데이터들이 FormData를 통해 서버로 전송됩니다.
우선 주요 코드를 보여드리고 한 파트씩 살펴보겠습니다.
useState의 경우 state라는 객체 안에 상태 변수를 추가했습니다.
- 객체이므로 state.pay와 같이 사용하면 됩니다.
- state 선언을 여러 줄 선언하면 가독성이 좀 떨어지는 것 같아서 사용해 봤습니다.
- areaName만 초기값을 설정한 이유는 select 태그를 사용할 때 default로 용산구가 설정되어 있기 때문입니다.
해당 함수는 아래 사진을 보시면 이해가 잘 될 것 같습니다.
파일 선택을 클릭하고 이미지를 선택하면
onChange를 통해 선택된 이미지가 e(event)에 담겨 handleImgUpload(e) 함수에 전달되고 코드가 실행됩니다.
이어서 handleImgUpload 함수를 설명드리면,
- 이미지는 e.target.files에 위치한 상태이고, 한 장의 이미지만 전송하므로 e.target.files[0]에 이미지 파일이 담겨있습니다.
- setState({ })는 객체로 선언한 useState에 [state, setState]에서 state 값을 변경시키는 방법입니다.
const [file, setFile] = useState("")로 대체하셔도 무방합니다.
해당 함수가 실행되면 file이라는 state 변수에는 현재 이미지 파일이 담겨있는 상태입니다.
- console.log(e.target.files[0])의 값
form 태그에서 실행되는 함수 handleOnSubmit을 살펴보겠습니다.
-
e.preventDefault는 form 태그가 전송되면 자동으로 화면 새로고침 현상이 발생하는데, 이 경우 서버에 데이터 전송이 되기 전에 화면이 새로고침 되어 요청을 보내지 못하게 됩니다. 해당 코드를 사용하면 새로고침 되는 e(event)발생을 중지시키는 역할을 수행합니다.
-
form 태그의 주요 메서드 (formData는 아까 new FormData로 생성했습니다.)
formData.append(key, value) - key, value를 추가
formData.delete(key) - key에 해당하는 key, value 삭제
formData.get(key) - key 값에 해당하는 value 반환
formData.has(key) - key 값이 존재하면 true, 아니면 false
formData.getAll(key) - append 메서드로 추가 시 key 중복을 허용한다, 모든 key 값에 해당하는 value 반환(작성하고 보니 Map과 유사한 것 같네요 👀)
-
formData에 값이 잘 저장됐는지 확인하려고 console.log(formData)를 사용하면 원하는 정보가 출력되지 않습니다. 그래서 for...of를 사용해 주시면 됩니다.
//Key 확인하기
for (let key of formData.keys()) {
console.log("key : " + key);
}
/* value 확인하기 */
for (let value of formData.values()) {
console.log("value : " + value);
}- 서버와의 요청, 응답 과정에서 발생할 에러를 대비해 try...catch를 사용했고, formData를 통채로 서버에 전송했습니다. (이미 key, value 형태로 다 설정했습니다.)
🚀 서버로 요청
등록하기 버튼을 클릭하면 아까 for...of로 formData를 출력했던 값, 서버에서 성공적으로 응답했다는 메세지, 프론트에서 응답 결과 성공이면 출력되는 '성공' 메세지가 출력된 것을 확인할 수 있습니다!
(👀이미지는 위 console 결과에서 본 것처럼 object File의 형태입니다.)
회의실 리스트에도 정상적으로 추가가 됐습니다.
후기
최근 강의와 과제 위주로 학습을 진행하느라 블로그를 너무 방치한 것 같아 향후 어떻게 블로그를 운영할지 고민을 많이 해봤는데, 기존처럼 학습 내용은 노션으로 정리하고 도움이 될 것 같은 내용들이나 구글에 검색했을 때 자료가 부족하다고 느낀 부분을 포스팅하기로 결정했습니다. 글이 너무 많으면 유익한 자료 일지라도 가독성도 떨어지고 이해하기 어려웠던 경험이 있어 최대한 도표, 이미지를 적극 활용해 포스팅을 이어나갈 예정입니다.
