리액트에서 api호출하고 데이타를 받아와서 보여주기

먼저 서버에서 데이타를 받아올 api 함수를 먼저 만든다. api.js 파일을 생성해서 만들자

 

fetch라는 함수를 이용해서 api를 만든다. fetch함수 사용법은 다음url을 참조한다.

developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95

Using Fetch - Web API | MDN

호출할 서버는 이전에 만든 스프링부트의 url을 참조한다.

 

api 소스내용

// 기본 api url 주소
const URL_API = "http://localhost:8080/api/v1";

// hello api url 주소
const URL_HELLO = `${URL_API}/hello`;

function hello(){
    return fetch(URL_HELLO)
    .then(response => {
        return response.text();
    })
    .then(hello => {
        return hello;
    })
    .catch(error => console.log(error));
}

export {
    hello,
}

여기서는 api 결과 값이 text로 넘어와서 response.text()를 썼다, json으로 넘어오면 response.json()을 써야한다.

 

 

app.js에서 api를 불러오는 코드를 작성한다.

import './App.css';
import {hello} from './api';
function App() {

  const [state, setState] = useState("");

  function handleClick(){
    hello().then(response => {
      setState(response);
    })
  }
  return (
    <div>
      <button onClick={handleClick}>Hello</button>
      <p>
        {state}
      </p>
    </div>
  );
}

export default App;

Hello  버튼을 클릭해보자 

 

다음과 같은 오류가 발생한다.

Access to fetch at 'http://localhost:8080/api/v1/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

이 오류에 대해서는 다음을 참조하자

developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

이것은 동일 출처가 아닌 url을 호출할때 나오는 오류이다. 서버에서 해당 부분은 적용해보자

다음 url을 참조해서 서버에 적용한다.

samtao.tistory.com/22

스프링부트 CORS 적용하기

설정후 서버를 재시작하고 다시한번 버튼을 클릭해본다.

 

정상적으로 Hello world!를 출력한다.