React에서 JSON 데이터를 파라미터로 전송

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: ""
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const jsonData = JSON.stringify(formData);

    fetch("http://example.com/api/endpoint", {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      },
      body: jsonData
    })
    .then(response => response.json())
    .then(data => console.log("서버 응답:", data))
    .catch(error => console.error("AJAX 오류:", error));
  };

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setFormData(prevFormData => ({ ...prevFormData, [name]: value }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <label>
        Message:
        <textarea name="message" value={formData.message} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

위의 코드에서는 useState 훅을 사용하여 폼 데이터를 관리합니다. handleChange 함수는 useState 훅으로 관리되는 formData 상태 객체를 업데이트합니다. handleSubmit 함수는 formData를 JSON 문자열로 직렬화하고, fetch() 함수를 사용하여 AJAX 요청을 보냅니다.

fetch() 함수는 Promise를 반환하므로, then() 함수를 사용하여 응답 데이터를 처리합니다. catch() 함수는 AJAX 요청이 실패했을 때 호출됩니다.

이제 JSON 형식으로 전송하는 AJAX 요청을 React에서 보내는 방법에 대해 이해하셨을 것입니다.

 

React에서 JSON 형식으로 파라미터를 전송하는 방법을 요약하면 다음과 같습니다.

1. useState 훅을 사용하여 폼 데이터를 관리합니다.
2. handleSubmit 함수에서 formData를 JSON 문자열로 직렬화합니다.
3. fetch() 함수를 사용하여 AJAX 요청을 보냅니다.
4. then() 함수를 사용하여 응답 데이터를 처리합니다.