Today I Learned 1206

React : Spring 연동

예시 : Get 방식과 Post 방식

import React, { useState } from "react";

const SpringFront =  () => {

    const [message, setMessage] = useState([]);
    const [user, setUser] = useState("");

    const getPortNumber = () => {
        fetch("/getPortNumber")
        .then((res) => res.json())
        .then((data) => setMessage(data))
        .catch((err) => console.log("err : ", err));
    }

    const getUserInfo = () => {
        fetch("/getUserInfo", {
            method: "post",
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                name: "홍길동",
                age: 20
            })
          
        })
        .then((resp) => resp.text() )
        .then((data) => setUser(data))
        .catch((err) => console.log("err : ", err));
    }

    return(
        <>
            <div>
                <p>1. 서버로부터 응답받은값</p>
                <button onClick={getPortNumber}>통신하기</button>
                <ul>{message.map((e) => <li>{e}</li>)}</ul>
            </div>


            <div>
                <p>2. 서버로부터 응답받은값</p>
                <button onClick={getUserInfo}>통신하기</button>
                <ul>{user && <li>{user}</li>}</ul>  
                {/* 조건부 랜더링 */}
            </div>
        
        </>
    )

}

export default SpringFront;

기본적인 방식은 js 와 다르지 않음. fetch 형태로 주소를 입력하여 요청을 보낸 다음 반환값을 json, text 등의 형태로 parsing 하여 사용. 코드에서는 반환값(res) 를 set으로 변수에 저장하여 출력하였다.

유의할 점
React의 경우 기본적으로 port 3000을 사용하고 Boot 의 경우 8080을 사용 -> 포트 번호가 다르기 때문에 에러가 발생한다.
해결방안

"proxy" : "http://localhost:8080" 을 통해 요청이 정상적으로 보내지게 설정

spring 프로젝트 생성

결과화면