react - axios란 무엇인가?

📌Axios란?

 HTTP Client(HTTP 상에서 커뮤니케이션 하는 자바기반 컴포넌트) 를 내장하고 있는 Angular와 다르게, 리액트에는 따로 내장하는 내장클래스가 존재하지 않는다. 

 

따라서 리액트에서 AJAX(비동기 웹 애플리케이션) 를 구현하기 위해서 Javascript 내장 객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 합니다.

 

그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까요? 현재 리액트에서 가장 많이 사용하고 있는 HTTP Client라이브러리는  Fetch API와 Axios가 있다 

 

 

📌React에서 Axios 구현하기

1. Axios 설치

npm install axios
yarn add axios


// 생성한 프로젝트 상단에 import로 추가
import axios from "axios"

 

2. Axios 사용하기

프론트에서는 아래의 두 가지 처리를 해 주면 된다.

1) 비동기로 서버에 요청 -> 2) 서버의 응답이 오면 받아서 성공/실패 시를 구분해서 처리

 

서버에 요청 후 응답이 오기까지 시간이 걸리기 때문에 요청은 비동기 처리하고,

응답을 처리하는 부분은 then이나 await을 사용한다.

 

get요청 

 내가 사용했던 axios get요청 예제이다. 

  getMovies = async () => {
    const{
        data: {
        data: { movies },
      },
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    // axios가 실행되기 까지 시간이 걸리기 떄문에 await 이 필요하다.
    this.setState({ movies, isLoading: false });
  };

 

 Axios 공식 페이지 예제 

async function getUser() { // async, await을 사용하는 경우
  try {
      // GET 요청은 params에 실어 보냄
    const response = await axios.get('/user', {
        params: {
            ID: 12345
        }
    });
    
    // 응답 결과(response)를 변수에 저장하거나.. 등 필요한 처리를 해 주면 된다.
    
    await axios.get('/user?ID=12345'); // 위의 요청과 동일
    
    var userId = 12345;
    await axios.get(`/user?ID=${userId}`); // Backtick(`)을 이용해 이렇게 요청할 수도 있다.
    
    console.log(response);
  } catch (e) {
    // 실패 시 처리
    console.error(e);
  }
}

응답은 json 형식으로 받는다. 

[
  { id: 1, pw: '1234', name: 'JUST' },
  { id: 2, pw: '1234', name: 'DO' },
  { id: 3, pw: '1234', name: 'IT' }
]

 

 GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다. 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.

post 요청 

async function postUser() {
  try {
  // POST 요청은 body에 실어 보냄
    await axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    });
  } catch (e) {
    console.error(e);
  }
}

 

 

Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용할까?

-> 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.

 

이외에도 put과 delete가 있지만 생략하겠다! 

 

📌Axios특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경

 

참고자료 

• https://sokkung.tistory.com/213
• https://koras02.tistory.com/48