리엑트 + 스프링부트 컨트롤러 연동 (React + Spring Boot)

이전에는 리엑트를 연습했엇다.

이제 본격적으로 리엑트 + 스프링 부트를 한번 연결 시켜 보자 

 

인텔리 제이로했음 .

 

JSX로 함

 

우선 컨트롤러를 보자 

 

@RestController
public class boardController {

    @GetMapping("/board")
    public String board() {
        System.out.println("연결 잘됨?");
        return "연결테스트";
    }

    }

 

이렇게 /board라는 것을 use이펙터로 

ajax를 사용 하여 컨트롤러와 통신한다. 

 

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  // message 초기값 설정 (""로 설정)
  const [message, setMessage] = useState("");

  // useEffect(함수, 배열) : 컴포넌트가 화면에 나타났을 때 자동 실행
  useEffect(() => {
    // fetch(url, options) : Http 요청 함수
    fetch("/board")
      .then(response => response.text())
      .then(message => {
        setMessage(message);
      });
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          board : {message}
        </p>
      </header>
    </div>
  );
}

export default App;

 

 성공이다.