[React] axios 라이브러리를 이용한 ajax

목표

서버에 새로고침 없이 데이터를 주고 받을 수 있는 브라우저 기능을 ajax라고 한다.

ajax로 get/post를 요청하는 방법 중 axios 라이브러리를 통한 요청방법에 대해 알아본다.

 

기본설정 및 사용법

1. 라이브러리 설치

npm install axios

터미널에서 프로젝트 폴더 경로로 이동한 후, 위 명령어를 입력해 라이브러리를 설치한다.

 

2. axios import 및 기본 사용법

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('서버URL/데이터이름.json')
      .then((result)=>{
        console.log(success)
      })
      .catch(()=>{
        console.log('fail')
      })
    }}>버튼</button>
  )
}

axios.get에 서버 URL을 입력해 필요한 데이터를 받아온다.

이 때, 성공하면 then을, 실패하면 catch문을 수행한다.

 

3. POST 요청

axios.post('서버URL', {name : 'PARK'})

서버로 {name : 'PARK'} 자료가 전송된다.

2번에서 처럼 then과 catch도 뒤에 사용 가능하다.

 

4. 다중 AJAX 요청

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

역시 then, catch 사용 가능

 

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌