프로젝트

[SpringBoot/React] JSON 교환

째로스 2023. 7. 6. 23:42

목표

Spring Boot와 React간 JSON을 전송해본다.

 

SpringBoot -> React로 JSON 전송하기

@RestController
public class HelloController {
    @PostMapping(value="/api/login", consumes="application/json;")
    public Member login(@RequestBody HashMap<String, Object> map) {
    	System.out.println(map);
    	Member member=new Member("chaeros","1234","채로스",28);
    	return member;
    }
}

React에서 Spring Boot로 /api/login URL을 통해 post방식으로 접속했을 때, 

매개변수 HashMap 자료형의 map 통해 React에서 전송하는 JSON 데이터도 받을 수 있다.

또 member 객체를 반환하여 JSON 형식으로 데이터를 전송하도록 하였다.

(consumes="application/json;" 속성을 통해 JSON 방식으로 전송할 수 있게 된다.)

 

 

React->SpringBoot JSON 전송하기

const [inputId, setInputId] = useState("");
const [inputPw, setInputPw] = useState("");
let [data,setData] = useState("")
    
fetch("/api/login", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        email:inputId,
        pw: inputPw
    })
  })
  .then(res => res.json())
  .then(data => setData(data))
  .catch();

fetch를 사용하여 /api/login 으로 email과 pw를 POST 형식으로 전송한다.

헤더 입력과 body의 JSON.stringify를 사용해야 JSON 형식으로 데이터 전송이 가능하다.

 

아래의 then은 서버로부터 전송받은 데이터를 처리하는 작업을 수행한다.

첫 번째 then은 받아온 데이터의 형식을 지정해주고, 두 번째 then은 해당 데이터를 이용할 때 쓰인다.

catch에는 데이터 송수신간에 문제가 생겼을 경우 수행할 작업을 입력할 수 있다.

 

결과

React에서 ID : 아이디123 , PW : 비밀번호123 입력하여 확인 버튼을 누르면

스프링 부트에서 해당 데이터를 JSON 방식으로 전송받는다.

또한 위 코드에서처럼 member 객체를 React로 전송하는데

브라우저의 개발자 모드를 보면 정상적으로 JSON 파일을 수신했음을 알 수 있다.

저작자표시