💻 코딩 일기 : [React, Spring] 'Spring Boot에서 React로 데이터 응답하기 ' 편

🔔 'Spring Boot에서 React로 데이터 응답하기'에 대해서 알아보자!

💟 Spring Boot 응답하기

클라이언트가 서버에게 요청을 하고 서버에서 클라이언트에게 응답할 때 객체를 직렬화하여 JSON으로 보내면 axios는 파싱해서 자바스크립트 객체로 만들어 화면에 표시합니다.

React(App.jsx)

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

function App(props) {
  const [result, setResult] = useState("");
  
  function handleClick2() {
    axios.get("/api/main42/sub2").then((param) => setResult(param.data));
  }

  return (
    <div>
      <button onClick={handleClick2}>응답 받기</button>
    </div>
  );
}

export default App;

• 버튼을 클릭하면 handleClick2 함수가 호출하고 axios를 사용하여 서버로 GET 요청을 보내고, 서버로부터 받은 응답 데이터를 콘솔에 출력합니다.
• GET 요청 이후, .then() 메서드는 요청이 완료되고 응답이 도착했을 때 실행될 콜백 함수입니다.
  then() 메서드의 매개변수 param은 응답 객체이며 param.data는 서버에서 반환한 실제 데이터를 나타냅니다.

Spring Boot(Controller42.java)

@Controller
@RequestMapping("/api/main42")
public class Controller42 {

    @GetMapping("sub2")
    @ResponseBody
    public String method2() {
        double random = Math.random();
        if (random < 1.0 / 3) {
            return "가위";
        } else if (random < 2.0 / 3) {
            return "바위";
        }
        return "보";
    }
}

• @ResponseBody 어노테이션이 없고 return을 한다면 바로 view로 보내기 때문에 응답 본문으로 보내기 위해 @ResponseBody` 어노테이션이 있어야 합니다.
• 클라이언트가 /api/main42/sub2 경로로 GET 요청을 보내면, 이 메서드가 가위, 바위, 보 문자열을 랜덤하게 응답합니다. 이 응답은 클라이언트에게 다시 전달되어 화면에 표시합니다.

💟 Map 사용해서 객체로 응답하기

스프링에서 map 객체로 응답한 것을 JSON으로 바꾸고 JSON을 객체로 바껴서 화면에 표시됩니다.

React(App.jsx)

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

function App(props) {

  function handleClick4() {
    axios.get("/api/main42/sub4").then((param)=> console.log(param.data));
  }

  return (
    <div>
        <button onClick={handleClick4}>JSON 응답 받기</button>
    </div>
  );
}

export default App;

• handleClick2() : 서버로 GET 요청을 보내고, 서버로부터 받은 응답 데이터(param.data)를 JSON 형식에 맞게 콘솔에 출력합니다.

  {
  "name": "홍길동",
  "age": 22,
  "married": false,
  "info": {
  "team": "토트넘",
  "location": "런던"
  },
  "item": ["컴퓨터", "스마트폰"]
  }

Spring Boot(Controller42.java)

@Controller
@RequestMapping("/api/main42")
public class Controller42 {
    @GetMapping("sub3")
    @ResponseBody
    public Map<String, Object> method3(){
        return Map.of("name", "홍길동", "age", 22,
                "married", false,
                "info", Map.of("team", "토트넘", "location", "런던"),
                "item", List.of("컴퓨터", "스마트폰"));
    }
}

• /api/main42/sub3 GET 요청을 처리하고, Map 객체를 이용하여 JSON 형식의 응답을 보냅니다. 이 응답은 "name", "age", "married", "info", "item" 등의 키와 그에 해당하는 값으로 구성되어 있습니다.

💟 자바빈 사용해서 응답하기

React(App.jsx)

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

function App(props) {

  function handleClick5() {
    axios.get("/api/main42/sub5").then((param)=> console.log(param.data));
  }

  return (
    <div>
        <button onClick={handleClick5}>JSON 응답 받기</button>
    </div>
  );
}

export default App;

• handleClick5() : 서버로 GET 요청을 보내고, 서버로부터 받은 응답 데이터(param.data)를 JSON 형식에 맞게 콘솔에 출력합니다.

  {
  "name": "강인",
  "height": 177.7,
  "info": {
  "name": "흥민",
  "age": 55,
  "desc": "흥민님은 55살입니다."
  },
  "foods": [
  "감자",
  "고구마"
  ],
  "married": false
  }

자바빈(MyBean411.java)

@Data
public class MyBean411 {
    private String name;
    private Integer age;

    public String getDesc(){
        return name + "님은 " + age + "살입니다.";
    }
}

• 자바빈에 get 메서드가 있으면 해당 메서드에 의해 결정된 프로퍼티의 값이 JSON으로 응답될 수 있습니다.

Spring Boot(Controller42.java)

@Controller
@RequestMapping("/api/main42")
public class Controller42 {
    @GetMapping("sub5")
    @ResponseBody
    public MyBean411 method5(){
        MyBean411 obj = new MyBean411();
        obj.setName("홍길동");
        obj.setAge(22);
        return obj; // JSON으로 직렬화
    }
}

• /api/main42/sub3 GET 요청을 처리하고, Map 객체를 이용하여 JSON 형식의 응답을 보냅니다. 이 응답은 "name", "age", "married", "info", "item" 등의 키와 그에 해당하는 값으로 구성되어 있습니다.