스프링부트와 리액트 연동 - Controller 호출

nowij·2022년 3월 11일

스프링부트와 리액트 연동하기

목록 보기

2/2

1편에서 기본 환경설정을 마쳤다면 실제로 기능을 구현하기 위한 스프링부트와 이랙트 연동을 설정을 한다

1. 스프링부트 Controller 생성

@RestController
public class NowijController {

    @GetMapping("/nowij")
    public String Nowij() {
        return "Spring Boot and React 연동 테스트 \n";
    }
}

리액트 화면으로 보낼 데이터를 return 값으로 설정

2. 스프링부트와 리액트 연동

스프링부트에 요청(Request)을 하고 응답(Response)을 받아 화면에 보여주는 작업

1. 프록시 설정

CORS(cross-orgin requests) 발생을 막기 위해 proxy 설정
VS Code에서 package.json에서 스프링부트의 서버 주소를 추가
프록시설정

🚨 프록시 설정 후 npm start 에러 🚨
options.allowedHosts[0] should be a non-empty string.
유선랜을 와이파이로 바꾸니까 에러없이 동작

💡 참고 블로그
https://velog.io/@yunso/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9D%EC%8B%9C-%EC%97%90%EB%9F%AC

2. App.js 수정

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

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

  // useEffect(함수, 배열) : 컴포넌트가 화면에 나타났을 때 자동 실행
  useEffect(() => {
    // fetch(url, options) : Http 요청 함수
    fetch("/nowij")
      .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>
          nowij : {message}
        </p>
      </header>
    </div>
  );
}

export default App;

3. 확인

스프링부트에서 return한 데이터가 화면에 출력되는 것을 확인

💡 참고 블로그 💡

nowij

이전 포스트