💻 코딩 일기 : [React, Spring] 'Axios를 활용한 React와 Spring Boot의 통신' 편

🔔'Axios를 활용한 React와 Spring Boot의 통신'에 대해서 알아보자!

💟 Axios

HTTP 요청을 만들고 응답을 처리하는 JavaScript 라이브러리입니다. 주로 웹 애플리케이션에서 서버와의 통신을 담당합니다. 또한, Axios를 사용하면 HTTP GET, POST, PUT, DELETE 등의 메서드를 사용하여 서버에 요청을 보낼 수 있습니다. 또한 요청 헤더나 요청 본문을 설정하고 응답 데이터를 처리합니다. axios 사용하는 이유는 요청을 주고 받기 하기 위해서 사용합니다.

get 요청(axios.get("경로"))

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

function App(props) {
  function handleClick1() {
    axios.get("/path1");
  }

  function handleClick2() {
    const qs = new URLSearchParams();
    qs.append("city", "미국");
    qs.append("address", "뉴욕");
    axios.get("/path2?" + qs.toString());
  }

  function handleClick3() {
    const qs = new URLSearchParams();
    qs.append("name", "kim");
    qs.append("age", 24);
    axios.get(`/path3?${qs.toString()}`);
  }

  return (
    <div>
      <div>
        <button onClick={handleClick1}>/path1 get 요청</button>
      </div>
      <div>
        <button onClick={handleClick2}>/path2 get 요청</button>
      </div>
      <div>
        <button onClick={handleClick3}>/path3 get 요청</button>
      </div>
    </div>
  );
}

export default App;

• handleClick1() : '/path1'로 GET 요청을 보냅니다.
• handleClick2() : '/path2'로 GET 요청을 보냅니다. URLSearchParams를 사용하여 쿼리 매개변수를 추가하고 이를 경로에 붙여서 요청을 보냅니다. /path2?city=미국&address=뉴욕
• handleClick3() : '/path3'로 GET 요청을 보냅니다. URLSearchParams를 사용하여 쿼리 매개변수를 추가하고 이를 경로에 붙여서 요청을 보냅니다. /path3?name=kim&age=24

💟 React에서 GET,POST 요청을 보내고 Spring Boot 서버에서 요청 처리하는 예제

먼저 React와 Spring Boot와 연결하기 위해서 설정을 해줍니다.

Vite 설정 파일 (vite.config.js)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
      },
    },
  },
});

• api로 시작하는 요청을 "http://localhost:8080 (Spring Boot 포트번호)"으로 보내는 프록시하도록 설정을 합니다.
  프록시 : 클라이언트와 서버 사이에서 중계하는 역할을 합니다.

React(App.jsx)

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

function App(props) {
  function handleClickButton1() {
    //   ajax get 요청
    axios.get("/api/someurl");
  }

  function handleClickButton2() {
    axios.post("/api/someurl");
  }

  return (
    <div>
      <button onClick={handleClickButton1}>get 요청</button>
      <button onClick={handleClickButton2}>post 요청</button>
    </div>
  );
}

export default App;

• get 요청 버튼 클릭 시, handleClickButton1 핸들러 메서드가 실행되고 /api/someurl 경로로 get 요청을 보냅니다.
• post 요청 버튼 클릭 시, handleClickButton2 핸들러 메서드가 실행되고 /api/someurl 경로로 post 요청을 보냅니다.

Spring Boot(Controller40.java)

@Controller
public class Controller40 {

    @GetMapping("/api/someurl")
    public void method1(){
        System.out.println("Controller40.method1");
    }

    @PostMapping("/api/someurl")
    public void method2(){
        System.out.println("Controller40.method2");
    }
}

• react에서 /api/someurl 경로로 get 요청을 보내면 @GetMapping으로 지정된 메소드(method1)가 요청을 처리하여 Controller40.method1이 출력됩니다.
• react에서 /api/someurl 경로로 post 요청을 보내면 @PostMapping으로 지정된 메소드(method2)가 요청을 처리하여 Controller40.method2가 출력됩니다.

💟 URLSearchParams를 활용한 GET, POST 요청 처리 예제**

React(App.jsx)

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

function App(props) {

  function handleClickButton5() {
    const params = new URLSearchParams();
    params.append("id", 3);
    params.append("name", "son");
    params.append("email", "son@gmail.com");
    // axios.get("/api/someurl3?"+params);
    axios.get(`/api/someurl3?${params}`);
  }

  function handleClickButton6() {
    const params = new URLSearchParams();
    params.append("foods", "pizza");
    params.append("foods", "coffee");
    params.append("city", "busan");
    axios.post("/api/someurl3", params);
  }

  return (
    <div>
      <button onClick={handleClickButton5}>get 요청 with query string</button>
      <button onClick={handleClickButton6}>post 요청 with data</button>
    </div>
  );
}

export default App;

• handleClickButton5() : GET 요청을 보내고 쿼리 스트링을 생성하여 axios.get()을 통해 /api/someurl3 경로에 해당 쿼리 스트링을 포함하여 GET 요청을 보냅니다.
• handleClickButton6() : axios.post()을 통해 /api/someurl3 경로로 POST 요청을 보낼 때 요청 본문에 데이터(foods[], city)를 담아서 추가한 후에 POST 요청을 보냅니다.

Spring Boot(Controller40.java)

@GetMapping("/api/someurl3")
public void method5(@RequestParam("id") Integer id,
                    @RequestParam("name") String name,
                    @RequestParam("email") String email){
    System.out.println("id = " + id + ", name = " + name + ", email = " + email);
}

@PostMapping("/api/someurl3")
public void method6(String[] foods, String city){
    System.out.println("foods = " + Arrays.toString(foods) + ", city = " + city);
}

• GET 방식은 요청을 보낼 때 쿼리 문자열을 URL에 포함시켜 전달하며, POST 방식은 요청을 보낼 때 별도의 몸통(body)에 데이터를 담아 전달합니다.
• @RequestParam의 요청 파라미터와 메소드의 매개변수 이름이 동일하면 @RequestParam 생략 가능합니다.

---

💟 React와 Spring Boot 실습 예제

React에서 Spring Boot 서버로 요청을 보내고 요청을 처리하여 데이터를 반환하는 과정을 보여줍니다.

React 애플리케이션 (App.js)

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

function App(props) {
  const [customerId, setCustomerId] = useState("");
  const [customerName, setCustomerName] = useState("");

  function handleSearchClick() {
    // 조회버튼 클릭 시 /api/customer?id=#로 요청
    axios
      .get(`/api/customer?id=${customerId}`)
      .then((response) => response.data)
      .then((data) => setCustomerName(data));
  }

  return (
    <div>
      <div>
        <input type="number" onChange={(e) => setCustomerId(e.target.value)} />
      </div>
      <button onClick={handleSearchClick}>조회</button>
      <div>이름 : {customerName}</div>
    </div>
  );
}

export default App;

• input 요소에 ID를 입력하고 조회 버튼을 누르면 해당 ID의 고객 이름을 표시합니다.

Controller39.java

@Controller
@RequiredArgsConstructor
public class Controller39 {

    private final Service05 service;

    // /api/customer?id=#
    @GetMapping("/api/customer")
    @ResponseBody
    public String customerName(Integer id) {
        return service.getCustomerName(id);
    }
}

• /api/customer 경로로 GET 요청을 처리하고 요청된 고객 ID를 서비스에 전달하여 고객의 이름을 가져옵니다.

Service05.java

@Service
@Transactional(rollbackFor = Exception.class)
@RequiredArgsConstructor
public class Service05 {
    private final Mapper09 mapper;

    public String getCustomerName(Integer id) {
        return mapper.selectNameById(id);
    }
}

• 고객 ID를 받아서 mapper를 통해 고객의 이름을 조회하여 반환합니다.

Mapper09.java

@Mapper
public interface Mapper09 {

    @Select("""
            SELECT CustomerName
            FROM Customers
            WHERE CustomerId = #{id}
            """)
    String selectNameById(Integer id);
}

• 고객 ID를 받아 DB에서 고객의 이름을 조회하는 쿼리를 정의합니다.