[REACT] form 데이터를 비동기로 서버에 전달

 

위와 같이 아이디, 제목, 내용을 입력하고 등록버튼을 누르면

작성한 데이터들을 서버로 전달하는 하나의 폼이 있다고 가정하자.

 

원초적인 방법으로는 각 입력 태그마다 name이라는 Attribute를 부여해서 값을 전달했는데

React에서는 FormData 라는 객체를 이용해서 서버로 데이터를 전달할 수 있다.

 

그래서, 이번 포스트에서 다뤄볼 내용은 다수의 데이터들을 서버에 전달할 때

어떻게하면 쉽고 간단하게 비동기 방식으로 처리할 수 있을까에 대한 내용이다.

 

FormData

 

FormData 객체는 폼 요소들의 값을 쉽게 저장하고 서버에 전송할 수 있는 방법을 제공한다.

파일 업로드와 같은 복잡한 데이터를 처리할 수 있다는 장점이 있다.

 

사용법

 

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

// append 함수를 이용해서 키 값과 form 태그의 value값 담기
formData.append("key", value);

 

 

예제 코드

 

서버 단에 다음과 같은 코드가 있다고 가정하자.

 

@RequestMapping
@PostMapping("/bbswrite")
public String write(BbsDto dto) {
	int count = service.write(dto);
    return count > 0 ? "성공적으로 등록되었습니다." : "error";
}

 

이 메서드는 parameter로 BbsDto 객체를 전달받고, service의 write()를 실행하여

결과를 int 값으로 받아온 후, 결과 값이 0보다 크면 글 작성이 완료되었다는 메세지를 출력하는 메서드이다.

 

프론트 단에는 다음과 같이 코드를 작성한다.

 

import React, {useState} from "react";
import Axios from "axios";

export default function App() {

	// 서버에 넘겨줄 데이터 state
    const [id, setId] = useState('');
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    
    // 각 인풋 태그 마다의 핸들러 등록
    const changeId = (e) => {
    	setId(e.target.value);
    };
    const changeTitle = (e) => {
    	setTitle(e.target.value);
    };
    const changeContent = (e) => {
    	setContent(e.target.value);
    };
   
   
	return (
    <div>
    	<h3>글 작성하기</h3>
        <form onSubmit={submit}>
        	<table>
            	<thead>
                </thead>
                <tbody>
                	<tr>
                    	<td><input onChange={changeId} placeholder="아이디를 입력해주세요"/></td>
                    </tr>
                    <tr>
                    	<td><input onChange={changeTitle} placeholder="제목을 입력해주세요"/></td>
                    </tr>
                    <tr>
                    	<td><input onChange={changeContent} placeholder="내용을 입력해주세요"/></td>
                    </tr>
                </tbody>
            </table>
            <input type="submit" value="작성완료" />
        </form>
    </div>
    )
}

 

기본적으로 필요한 것들은 다 준비가 되었다.

이제 작성완료 버튼을 클릭하면 서버에 데이터를 비동기 방식으로 전달하는 함수를 만들어보자.

 

const submit = (e) => {
    e.preventDefault();
	
    // FormData 객체 생성
    let formData = new FormData();
    
    // formData 변수에 form에 있는 값들을 하나씩 담기
    // append 함수를 이용!
    formData.append("id", id);
    formData.append("title", title);
    formData.append("content", content);
    
    // axios를 이용해 비동기 방식으로 서버에 데이터 전달
    axios.post("http://localhost:3000/bbswrite", formData)
    .then(function(res) {
    	alert(res);
        window.location.href="http://localhost:9100/bbslist";
    })
    .catch(function(error) {
    	console.log(error);
    })
    
}

 

실행

 

글 작성이 성공적으로 되었다는 메세지를 받을 수 있다.