React | 서버로 form 데이터 전송하기

리액트에서 form 컴포넌트를 사용해 데이터를 서버로 전송하는 과정을 공식문서를 바탕으로 정리해보려 한다.

 

먼저, form 컴포넌트는 built-in 컴포넌트로 다음과 같이 사용할 수 있다.

<form>
	<label>
    	<textarea name="content" />
    </label>
    <button type="submit">Submit</button>
</form>

 

 

 

 

textarea를 form 태그로 감싸면 버튼을 클릭했을 때 onSubmit 이벤트 핸들러가 호출된다.

 

리액트 공식문서에 제공된 이벤트 핸들러 코드는 다음과 같다.

이벤트가 발생한 타깃의 값을 가져와 new FormData()로 FormData 객체를 생성한 뒤 body에 담아 전송하는 방식이다.

function handleSubmit(e) {
    // Prevent the browser from reloading the page
    e.preventDefault();

    // Read the form data
    const form = e.target;
    const formData = new FormData(form);

    // You can pass formData as a fetch body directly:
    fetch('/some-api', { method: form.method, body: formData });
  }

폼 데이터를 전송할 API 주소를 fetch() 안에 작성해 준다.

이때, 전송 방식(method)과 폼 데이터(formData)는 필수적으로 입력하고 필요한 header값이 있는 경우 같이 fetch에 넘겨주면 된다.

 

 

 

아래 코드는 폼 데이터를 json 형태로 변환하여 콘솔에 출력하는 확인하는 코드로 어떤 데이터가 전송된 건지 확인할 때 유용하게 쓰일 수 있다.

const formJson = Object.fromEntries(formData.entries());
console.log(formJson);

 

또는 다음과 같은 방식으로 반복문을 사용해 폼 데이터를 확인할 수 있다.

const formData = new FormData();
for (const keyValue of formData) {
	console.log(keyValue)
};

 

 

<textarea> – React