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

설치하기

https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85#%EC%82%AC%EC%9A%A9%ED%95%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD

Spring Boot + React.js 개발환경 연동하기

이분 벨로그 참고해서 주소 띄우는건 성공했는데

리액트앱 열었을때 백엔드 데이터가 넘어오질 않아서 

해결한 방법임

import React, {useEffect, useState} from 'react';
import axios from 'axios';

function App() {
  const [hello, setHello] = useState('')

  useEffect(() => {
    axios.get('http://localhost:8080/api/hello')
        .then(response => setHello(response.data))
        .catch(error => console.log(error))
  }, []);

  return (
      <div>
        백엔드에서 가져온 데이터입니다 : {hello}
      </div>
  );
}

export default App;

주소는 백엔드 주소랑 동일하게 다 써줘야한다

그리고 컨트롤러에도

package SeAH.savg;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
public class HelloWorldController {
    @GetMapping("/api/hello")
    public String test() {
        return "Hello, world!";
    }
}

@CrossOrigin 추가 해주면 

잘 넘어오게 되어 있음