💻 코딩 일기 : [React, Spring] 'JSON 형식 데이터 요청하기' 편

🔔'JSON 형식 데이터 요청하기'에 대해서 알아보자!

💟 JSON(JavaScript Object Notation)

Javascript 객체(Object) 문법으로 구조화된 데이터를 문자열로 표현합니다. Javascript 객체 리터럴 문법을 따르며 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언, 객체가 포함합니다. JSON의 프로퍼티명은 큰 타옴표로 묶어줘야 합니다.

• 직렬화(serializtion, stringify, encoding) : 객체가 JSON(text)으로 바뀔 때
• 역직렬화(parsing, deserialization, decoding) : JSON(text)이 객체로 바뀔 때

JSON은 GET, POST 방식일 때 모두 사용 가능하지만 GET 요청은 쿼리 스트링을 사용하여 데이터를 전달하고 POST 요청은 요청 본문에 JSON 형식으로 데이터를 포함하여 전달하기 때문에 POST 요청일 때 많이 사용합니다.

직렬화와 역직렬화 예제

React(App.jsx)

import React from "react";
import axios from "axios";

function App(props) {
  function handleClick1() {
    const obj1 = { name: "son", age: 44 };
    // const json1 = JSON.stringify(obj1);

    axios.post("/api/main41/sub1", obj1);
  }

  return (
    <div>
      <button onClick={handleClick1}>요청(Json 데이터 포함)</button>
    </div>
  );
}

export default App;

• axios가 두번째 파라미터가 객체면 자동으로 직렬화 해주기 때문에 별도로 JSON.stringify() 함수를 사용하여 객체를 직렬화할 필요가 없습니다.
• axios를 사용해서 POST 요청을 보낼 때 객체를 전달하면 자동으로 해당 객체를 JSON 문자열로 직렬화하여 요청 본문에 포함됩니다.

Spring Boot(Controller41.java)

@Controller
@RequestMapping("/api/main41")
public class Controller41 {

    @PostMapping("sub1")
    public void sub1(@RequestBody Map<String, Object> map) {
        // 역직렬화(JSON -> Map)
        System.out.println("map = " + map);
    }
}

• @RequestBody Map<String, Object> map : 요청 본문에 포함된 JSON 데이터를 자동으로 파싱해서 Map으로 변환하여 받습니다.

💟 React에서 입력한 데이터를 JSON 형식으로 Spring Boot 서버로 전송

React(App.jsx)

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

function App(props) {
  const [name, setName] = useState("");
  const [city, setCity] = useState("");

  function handleClick3() {
    // const data = {
    //   name : name,
    //   city : city
    // }

    // const data = {
    //   name,
    //   city
    // };

    axios.post("/api/main41/sub3", { name, city });
  }

  return (
    <div>
      <div>
        <input type="text" onChange={(e) => setName(e.target.value)} />
        <br />
        <input type="text" onChange={(e) => setCity(e.target.value)} />
        <br />
        <button onClick={handleClick3}>요청</button>
      </div>
    </div>
  );
}

export default App;

• input에 name과 city를 입력하면 onChange를 통해 setXXX 함수를 사용하여 해당 상태를 업데이트 하고 handleClick3() 함수에서 input에 입력한 값을 axios를 사용하여 POST 요청을 보냅니다. 요청 본문에 { name, city } 객체가 포함됩니다.

Spring Boot(Controller41.java)

@Controller
@RequestMapping("/api/main41")
public class Controller41 {
    @PostMapping("sub3")
    public void sub3(@RequestBody Map<String, Object> map){
        System.out.println("map = " + map);
    }
}

• POST 요청을 받고 @RequestBody를 사용하여 요청 본문에 포함된 JSON 데이터를 자동으로 Map 형태로 변환하여 받습니다.

💟 JSON 데이터 타입

React(App.jsx)

import React from "react";
import axios from "axios";

function App(props) {
  // json 데이터 타입 : 문자열,수, 불리언, 객체, 배열, null

  function handleClick1() {
    const data = {
      name: "son",
      age: 33,
      married: false,
      team: {
        location: "london",
        name: "토트넘",
      },
      item: ["phone", "shoes", "shirts"],
      address: null,
    };
    axios.post("/api/main41/sub5", data);
    //   {"name":"son","age":33,"married":false,
    //  "team":{"location":"london","name":"토트넘"},
    //  "item":["phone","shoes","shirts"],"address":null}
  }

  return (
    <div>
      <button onClick={handleClick1}>json 데이터와 요청</button>
    </div>
  );
}

export default App;

• 본문에 데이터를 포함합니다.
• 데이터 : {"name":"son","age":33,"married":false, "team":{"location":"london","name":"토트넘"}, "item":["phone","shoes","shirts"],"address":null}
  
  

Spring Boot(Controller41.java)

@PostMapping("sub5")
public void sub5(@RequestBody Map<String, Object> map){
    System.out.println("map = " + map);
}

• JSON 데이터 타입이 해당 타입으로 파싱됩니다.

  map = {name=son, age=33, married=false, team={location=london, name=토트넘}, item=[phone, shoes, shirts], address=null}
  name.getClass() = class java.lang.String
  age.getClass() = class java.lang.Integer
  item.getClass() = class java.util.ArrayList
  married.getClass() = class java.lang.Boolean
  team.getClass() = class java.util.LinkedHashMap

💟 전송 데이터를 자바빈으로 담아 요청

React(App.jsx)

import React from "react";
import axios from "axios";

function App(props) {

  function handleClick3() {
    axios.post("/api/main41/sub7", {
      name: "lee",
      height: 170.5,
      info: {
        address: "korea",
        city: "seoul",
      },
      foods: ["pizza", "pasta"],
      married: false,
    });
  }

  return (
    <div>
      <button onClick={handleClick3}>json 데이터와 요청</button>
    </div>
  );
}

export default App;

• handleClick3() 메서드에서 /api/main41/sub7 경로에 POST 요청 보내고 요청 본문에 {name, height, info{address, city}, foods, married} 객체를 포함합니다.

Spring Boot(MyBean412.java)

@Data
public class MyBean412 {
    private String name;
    private Double height;
    private Map<String, Object> info;
    private List<String> foods;
    private boolean married;
}

• React에서 전송한 데이터를 담는 자바빈 클래스를 생성합니다.

Spring Boot(Controller41.java)

@Controller
@RequestMapping("/api/main41")
public class Controller41 {

    @PostMapping("sub7")
    public void sub7(@RequestBody MyBean412 bean412){
        System.out.println("bean412 = " + bean412);
    }
}

• React에서 전송한 객체를 자바빈(MyBean412)으로 생성하여 받습니다.