React Axios

Ajax란?

서버에 GET, POST 요청을 할 때 새로고침 없이 비동기적으로 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다.

 

 

방법 3가지

Ajax로 GET/POST를 요청하는 방법은 3가지가 있다.

1. XMLHttpRequest 라는 옜날 문법 쓰기

2. fetch() 라는 최신 문법 쓰기

3. axios 같은 외부 라이브러리 쓰기 (추천)

 

 

Axios를 설치해보자

https://axios-http.com/kr/docs/intro

터미널 열어서 npm 명령어를 입력한다.

npm install axios

 

 

Ajax GET 요청하는 법

1. axios를 상단에 import 하고

2. axios.get(url) 로 요청을 한다.

3. 가져온 데이터를 사용한다.

import axios from 'axios'

function App(){
    return (
        <button onClick={()=>{
            axios.get('https://codingapple1.github.io/shop/data2.json')
            .then((결과)=>{
            	console.log(결과.data)
            })
            .catch(()=>{
            	console.log('실패함')
            })
        }}>버튼</button>
    )
}

 

 

POST 요청하는 법

axios.post('URL', {name : 'kim'})
.then((결과)=>{
    console.log(결과.data)
})
.catch(()=>{
    console.log('실패함')
})

 

 

동시에 여러개 요청하는 법

Promise.all( [axios.get('URL1'), axios.get('URL2')] )
.then((결과)=>{
    console.log(결과.data)
})
.catch(()=>{
    console.log('실패함')
})

 

 

fetch 최신문법 쓰기

이건 JSON -> object/array 로 자동변환을 안해줘서 직접 바꿔야 한다.

fetch('URL')
.then(결과 => 결과.json())
.then((결과) => { console.log(결과) } )