React - Ajax Axios

React Axios

React 에서 ajax를 사용하여 데이터를 가져오기 위해선 axios 라이브러리를 사용하여 데이터 통신을 할 수있다.

우선 터미널에 명령어를 입력하여 axios를 설치한다.

npm install axios

 

npm install axios 를 입력하여 설치하면 이러한 로그가 나타난다.

 

설치를 한 후 axios를 import를 해서 사용할 수 있도록 설정한다.

import axios from 'axios';

axios의 데이터를 불러오는 get문법은 이러하다.

axios.get('주소입력').then(() => {
	// 가져온 데이터를 활용한 코드 입력
}).catch(() => {
	// 실패시 코드 입력
})

get을 사용하여 가져온 후 then의 콜백함수를 사용하여 가져온 데이터를 활용하는 코드를 입력한다.

데이터 로드의 실패시 catch의 콜백함수를 사용하여 코드를 입력한다.

 

 

 

반응형

 

 

 

button 태그를 하나 생성 하여 데이터를 확인한다.

<button onClick={() => {
	// axios의 get 문법을 사용하여 데이터를 불러온다.
  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((data)=>{
    console.log(data);
  })
  .catch(() => {
    console.log('fail');
  });

}}>More</button>

 

버튼을 클릭하여 주소로 요청보낸 데이터 속에 data를 가져와 콘솔창에 나타난다.