리액트에서 서버 데이터를 가져오거나 불러오려면 어떻게 할까?
즉, 서버에 GET(가져옴)/POST(보냄)요청을 할때 "새로고침 없이" 데이터를 주고 받을 수 있는 브라우저 기능을 AJAX라고 한다.

AJAX 중 axios라는 외부 라이브러리를 사용하는 방법이 가장 많이 쓰인다고 한다.

먼저 axios를 사용하려면 외부 라이브러리이기 때문에 따로 npm install을 해줘야 한다.

npm install axios

그리고 따로 임포트만 해주면 바로 사용 쌉가능이다.

import axios from "axios"

데이터 가져오기

그럼 데이터를 가져오려면 어떻게 할까?
예를 들어 url이 "http://yongdols.data.json" 이라고 하자.

axios.get("http://yongdols.data.json")

개 간단하다. 그냥 axios.get에 원하는 url만 넣어주면 된다.
그럼 가져온 데이터는 어떻게 활용 할 수 있을까?

axios.get("http://yongdols.data.json")
.then((result)=>{ return console.log(result) })

then을 사용해 콜백함수로 전달인자를 result(보통 result로 쓴다고 함)로 정하고
리턴 값에서 사용할 수 있다.

추가로 result만 써버리면 아래의 사진처럼 이것저것 다른 데이터들도 통째로 가져온다.

따라서 정말 data만 가져오려면 result.data로 적어줘야한다.

axios.get("http://yongdols.data.json")
.then((result)=>{ return console.log(result.data) })

그럼 아래처럼 data만 가져온다!!

추가로 더 완성도 있는 코드를 만드려면 에러가 발생했을 떄를 대비해야한다.

axios.get("http://yongdols.data.json")
.then((result)=>{ return console.log(result) })
.catch(()=>{ return console.log("데이터를 가져오는데 실패했습니다."})

catch문으로 데이터를 받아오지 못했을 때 출력되는 콜백함수를 만들어 줄 수 있다.

데이터 보내기

post를 사용하면 데이터를 보낼 수 있다.
아래처럼 보낼 url과 데이터를 적어주면 된다.

axios.post("http://yongdols.data.json",{보낼 데이터})

여러 데이터 가져오기

여러개의 데이터를 가져오려면
아래의 방법처럼 여러번의 get 요청을 해도 된다.

axios.get("http://yongdols.data.json")
.then((result)=>{ return console.log(result) })
.catch(()=>{ return console.log("데이터를 가져오는데 실패했습니다."});
            
axios.get("http://yongdols.data2.json")
.then((result)=>{ return console.log(result) })
.catch(()=>{ return console.log("데이터를 가져오는데 실패했습니다."})

하지만 꽤 많은 양의 데이터를 한번에 가져오려면
Promise.all을 사용하면 쉽게 가져올 수 있고, 전체 데이터가 다 불러와졌을때/실패했을때
then과 catch문을 작성해줄 수 도 있다.

Promise.all([axios.get("http://yongdols.data.json"), axios.get("http://yongdols.data2.json")])

Promise.all로 가져온 데이터들은 배열로 결과값이 전달된다.
따라서 then에서는 전달 된 결과값을 배열로 사용이 가능하다.

Promise.all([axios.get("http://yongdols.data.json"), axios.get("http://yongdols.data2.json")])
.then(( [result1, result2] )=>{ console.log(result1, result2) })
//첫번째 인자는 첫번째 get요청의 결과값!! 두번쨰 인자는 두번쨰 get요청의 결과값!!