SpringBoot + React 연동(3) - React, axios로 API 통신

React + axios 를 사용해서 SpringBoot API 통신

1. 우선 React 에서 Axios 라이브러리를 추가하자!

1. VS Code프로젝트에서 터미널 오픈
2. Axios 추가
   1. npm install axios
   2. yarn add axios
3. 설치 후 package.json의 dependencies -> axios가 설치된것을 볼 수 있다.

 

2. Axios 통신 테스트

1. 우선 서버 통신 전에 간단하게 테스트 해보기
2. jsonplaceholder 라는 사이트에서 테스트용도로 사용할 수 있는 json파일을 제공해준다.
3. 사이트 아래에 Resources -> photos 사이트 접속
4. https://jsonplaceholder.typicode.com/photos

3. VS Code에서 테스트

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


const App = () => {

  const [photos, setPhotos] = useState([]);

  const getPhotosAPI = async () => {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/photos');
      const data = response.data;
      setPhotos(data);
    } catch(error){
      console.error('axios 통신 에러');
    }
  }

  useEffect(() => { getPhotosAPI() }, []);

  return (
    <ul>
      {photos.map(photo => {
        return (
          <li key={photo.id}>
            <div>{photo.title}</div>
            <div><img src={photo.thumbnailUrl}/></div>
          </li>
        )
      })}
    </ul>
  )
}

export default App;

API 통신 결과 사이트

이제 React(프론트)에서 가볍게 테스트 확인하였다.

그러면 다음편에서 SpringBoot에서 API를 통신해보자!

 

감사합니다!