7. axios로 데이터 요청하여 받아오기

우선 터미널에 아래와 같이 입력하여 axios 라이브러리 설치해주자.

npm install axios

그리고 코드 상단에 import 해주기

import axios from "axios";

axios로 데이터를 받아오려면 get 요청을 하면 되는데, 다음과 같이 입력하면 된다.

axios.get('GET요청할URL')
      .then(()=>{ 요청 성공 시 실행할 코드 })
      .catch(()=>{ 요청 실패 시 실행할 코드 })

나는 테스트하기 위해 public/data 폴더에 test.json이란 파일을 만들고

[
  {
    "subject": "1번째 일기",
    "date": "2022/10/01",
    "representative_img": "test_img/1.jpg",
    "content": "한강 불꽃 축제"
  },
  ...생략
  {
    "subject": "9번째 일기",
    "date": "2022/10/09",
    "representative_img": "test_img/9.jpg",
    "content": "초코에몽"
  }
]

이런 식으로 테스트 데이터를 넣어주었다.

이제 이 테스트 데이터가 받아와지는지 확인하기 위해 피드 페이지에 버튼 하나를 만들고 클릭되면 get 요청을 하도록 하였다.

import { Button, Container } from "react-bootstrap";
import axios from "axios";

function Feed() {
  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  return (
    <Container>
      ...생략
      <Button
        onClick={() => {
          axios
            .get("http://localhost:3000/data/test.json")
            .then((result) => {
              console.log(result.data);
            })
            .catch(() => {
              console.log("failed to load data");
            });
        }}
      >
        버튼
      </Button>
    </Container>
  );
}

export default Feed;

버튼을 눌러보니 잘 받아와진다!