[React] axios 사용하기

 

 

React, axios 사용하기

 

 

 

  axios 사용

axios 기본 설정

JQuery에 ajax가 있다면, React에는 axios가 있다.

 

axios를 다음과 같이 import 할 경우, axios를 사용할 수 있다.

axios.get('http://localhost:8080/joinAction.ad?Email=MOLLANG101@test456.com&password=mollang')
      .then(function(response) {
        alert('성공');
  });

axios.get(URL) 할 경우, 해당 action을 호출할 수 있다.

 

 

  axios 사용하기 - 2 

axios 사용하기

function joinAction() {

  let param = {
    Email : 'test@mollang.com',
    Password : '1234'
  }

  const joinActionURL = {
    method : 'post',
    url : 'http://localhost:8080/joinAction.ad',
    headers : {
      'Accept-Language': 'ko',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data : param,
  }
  axios(joinActionURL);
}

 

axios를 사용하기 위해서는 JSON의 기초를 알면 매우 좋다.

let param에는 request의 값들을 담았고, joinActionURL에는 axios의 설정들을 담았다.

AJAX보다 간소하여, 사용하기에는 매우 편하다.

 

해당 글은 API를 미리 만들었으므로, 결과가 동작된다.

 

 

  마무리

결과 바라보기 12시 51분에 결과가 들어온 것을 확인할 수 있다.

 해당 axios는 promise 원리에 동작된다.

 

axios가 매우 simple해보이지만, 다양한 JS의 기능들이 모여 만들어진 만큼 다른 곳도 알아보면 매우 좋다.