[React] ajax 데이터 요청하기 - Axios

✅ AJAX 요청해보쟈

• ajax의 가장 큰 장점은 새로고침 없이도 수행할 수 있다는 것
• JavaScript에서 3가지 방법으로 사용할 수 있는데,
  => XMLHttpRequest ( 옛날 js )
  => fetch ( 요즘 js )
  => axios ( 외부 라이브러리 )
  

✅ Axios

• Axios 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 것
• 환경 설정

  // 설치
  터미널> npm install axios
  터미널> yarn add axios
  // app.jsx(tsx)에서 import 해주기
  import axios from 'axios';

🔸 GET

• 서버에서 데이터 받아오기
• axios.get으로 받아오고, 요청 성공 시 뒤에 .then() 을 실행할 수 있음
• then() 내부 함수에서는 임의의 이름으로 받아온 데이터가 담긴 파라미터를 넣어줄 수 있고, 활용가능
• 이렇게 받아온 데이터에는 많은 정보가 같이 담겨있고,
• 필요한 주요 데이터만 사용하고 싶다면 뒤에 .data 를 붙여 얻을 수 있음
• 요청 실패 시에는 .catch() 함수가 실행되며, 내부 코드를 실행해줌

// 만약 onClick으로 받아온다면
onClick = { () => {
	axois.get(
		'데이터 받아올 서버 주소'
	).then(
		(받아온 데이터) => console.log( 받아온 데이터.data )
	).catch(
    	console.log('fail')
    )
}}

• 화면에 데이터를 state에 담아 보여주고 있었다면, 새로 얻어온 데이터를 setState로 추가해 화면에 렌더링 해줄 수 있음!!

🔸 POST

• 데이터를 서버로 보내주는 요청
• axios.post 활용

  axios.post( '/경로', { 보내고 싶은 데이터 object 형식으로 } );

🔸 Async / await 적용

• Promise 기반 Axios에서 Async / await 적용해보쟈

const onClick = async () => {
	try {
    	const res = await axios.get('데이터 주소');
    } catch (e) {
    	console.log(e)
    }
}

🔸 추가적 정보

• 동시에 여러개 ajax 요청하려면?

  Promise.all([ axios.get('/url1'), axios.get('/url2'), ... ]).then(()=>{});

• 원래 서버와는 문자만 주고받을 수 있음
  => 때문에 array건 object건 변환이 필요한데,
  => 위에서는 axios 라이브러리가 모두 수행한 것!!
  => JavaScript 내장함수인 fetch() 사용하면 변환 과정 필요

  fetch( ' 요청 주소 ' ).then(
      받아온데이터 => 받아온데이터.json()
  )