우선 터미널에 아래와 같이 입력하여 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;
버튼을 눌러보니 잘 받아와진다!
'프로젝트 > TMI' 카테고리의 다른 글
10. react-spinners 이용하여 로딩 컴포넌트 만들기 (0) | 2022.11.02 |
---|---|
8. 폼에 react-hook-form 사용하기 (0) | 2022.10.29 |
6. React Bootstrap Offcanvas 버튼 클릭 시 닫히게 하기 (0) | 2022.10.24 |
5. 피드 페이지 만들기 (0) | 2022.10.12 |
4. 필요한 페이지 레이아웃 구현 (0) | 2022.10.07 |