React와 Spring 사이에서 데이터 연동

🚀 개발 환경
▪  IDE : VScode 1.90.0, STS 3.9.18

▪  JAVA : JDK 11.0.22

▪  Spring : SpringFramework 5.0.2.
▪  WAS : Apache Tomcat v9.0.89

 

전체 파일은 나중에 시간이 생기면 업로드합니다.

 

 

---

 

1. React에서 Spring으로 GET(Query String) 방식을 통한 데이터 전달

 

📑 React : Spring.jsx

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

const Spring = () => {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  function tryLoginGet() {
    axios({
      url: `http://localhost:8081/myapp/loginget?id=${id}&pw=${pw}`,
    }).then((res) => {
      console.log(res);
    });
  }
  return (
    <div>
      <h1>React Spring 연결</h1>
      <h3>Login</h3>
      ID : <input onChange={(e) => setId(e.target.value)}></input>
      <br></br>
      PW : <input onChange={(e) => setId(e.target.value)}></input>
      <br></br>
      <button onClick={tryLoginGet}>로그인 시도 (GET)</button>
    </div>
  );
};

export default Spring;

 

 

📑 Spring : ReactController.java

package com.smhrd.myapp;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ReactController {
	
	@RequestMapping(value="/loginget")
	public String loginGet(@RequestParam("id") String id, @RequestParam("pw") String pw) {
		System.out.println("React GET 통신!");
    	System.out.println("ID : " + map.get("inputId"));
		System.out.println("PW : " + map.get("inputPw"));
		return "SUCCESS";
	}
}

 

 

---

 

2. React에서 Spring으로 POST 방식을 통한 데이터 전달

 

📑 React : Spring.jsx

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

const Spring = () => {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  function tryLoginPost() {
    axios({
      url: "http://localhost:8081/myapp/loginpost",
      method: "post",
      data:
        inputId: id,
        inputPw: pw,
      }),
    }).then((res) => {
      console.log(res);
    });
  }

  return (
    <div>
      <h1>React Spring 연결</h1>
      <h3>Login</h3>
      ID : <input onChange={(e) => setId(e.target.value)}></input>
      <br></br>
      PW : <input onChange={(e) => setPw(e.target.value)}></input>
      <br></br>
      <button onClick={tryLoginPost}>로그인 시도 (POST)</button>
    </div>
  );
};

export default Spring;

 

 

📑 Spring : ReactController.java

package com.smhrd.myapp;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
public class ReactController {

	@RequestMapping(value="/loginpost", method = RequestMethod.POST)
	public String loginPost(@RequestBody HashMap<String, Object> map) {
		System.out.println("React POST 통신");
		System.out.println("ID : " + map.get("inputId"));
		System.out.println("PW : " + map.get("inputPw"));
		return "SUCCESS";
	}
}

 

 

---

 

3. Spring에서 React로 POST 방식을 통한 데이터 전달

 

 Spring의 ReactController에서 ArrayList 데이터를 React 서버로 보내는 방법으로 React Server의 console을 확인하면 전달된 데이터 값을 확인할 수 있다.

 

📑 Spring : ReactController.java

package com.smhrd.myapp;

import java.util.ArrayList;
import java.util.HashMap;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.smhrd.myapp.model.SpringMember;

@RestController
@CrossOrigin
public class ReactController {

  @RequestMapping(value="/sendData", method=RequestMethod.POST)
  public ArrayList<SpringMember> sendData() {
    // SpringMember Class 필요!!!
  	String[] mArr = new String[3];
  	SpringMember m1 = new SpringMember("Kim", "1234", "010-1234-5678", "광주");
  	SpringMember m2 = new SpringMember("Lee", "5678", "010-4567-8901", "전주");
  	SpringMember m3 = new SpringMember("Park", "9012", "010-2345-6789", "부산");
  	ArrayList<SpringMember> mArr = new ArrayList<SpringMember>();
  	mArr.add(m1);
  	mArr.add(m2);
  	mArr.add(m3);
  	return mArr;
  }
}

 

 

📑 React : Spring.jsx

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

const Spring = () => {

  function getData() {
    axios({
      url: "http://localhost:8081/myapp/sendData",
      method: "POST",
    }).then((res) => {
      console.log(res);
    });
  }

  return (
    <div>
      <h1>React Spring 연결</h1>
      <button onClick={getData}>Spring에서 Data 가져오기 (POST)</button>
    </div>
  );
};

export default Spring;

 

 

---

 

4. React와 Spring 데이터 연동 시 발생했던 에러 및 해결 방법

 

💥 CORS(Cross-Origin Resource Sharing) 정책으로 인해 발생한 에러

 

❗ 에러 내용

 

 Access to XMLHttpRequest at 'http://localhost:8081/myapp/loginreact' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

🔨 해결 방법

 

1. React 프로젝트의 package.json 파일에 아래처럼 Spring 프로젝트의 기본 주소를 삽입한다.

 

 

 

2. Spring 프로젝트의 Controller 파일에서 @RestController 하단에 '@CrossOrigin' 어노테이션을 추가한다.

 

 

 

---

 

💥 Request failed with status code 415

 

❗ 에러 내용

 

ERROR
 Request failed with status code 415 AxiosError: Request failed with status code 415 at settle (http://localhost:3000/static/js/bundle.js:42835:12) at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:41501:66) at Axios.request (http://localhost:3000/static/js/bundle.js:41988:41)

 

❓ 에러 원인

 

 React와 Spring 데이터 연동 시에 Java에서 JSON 객체를 인식하지 못해서 발생하는 에러

 

🔨 해결 방법

 

 Java가 JSON 객체를 사용할 수 있도록 해당 Spring 프로젝트의 pom.xml 파일에 아래 라이브러리를 추가한다.

gson을 사용하면 Java가 JSON 객체를 사용할 수 있게 되고 또한 Spring에서 React로 ArrayList 형식으로 보낼 때 자동으로 키값이 설정되어 편리하다. gson이 없으면 키값을 일일이 부여해야 한다.

 

<!-- JSON 객체 사용 라이브러리 -->
<!-- React에서 Spring으로 POST 방식으로 데이터를 보낼 때 발생한 에러 해결 -->
<dependency>
	<groupId>com.google.code.gson</groupId>
	<artifactId>gson</artifactId>
	<version>2.8.7</version>
</dependency>