<React> 리액트에서 Axios (액시오스) 사용하기

: 서버와 데이터를 주고 받기 위해 HTTP 통신을 하는데, 리액트에는 이런 작업(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트 = HTTP Client) 을 하는 내장 클래스가 없다.
--> 리액트에서 AJAX 를 구현하기 위해 다른 HTTP Client 를 사용해야 한다. Fetch API, AXIOS

리액트에서 Axios 구현

1. Axios 설치

npm install axios
yarn add axios

2. 사용하기

• 비동기로 서버에 요청 -> 서버의 응답이 오면 받아서 성공/실패 를 구분하여 처리
• 서버에 요청 후 응답이 오기까지 시간이 걸리기 때문에 요청은 비동기로 처리하고, 응답을 처리하는 부분은 then 이나 await 을 사용한다.

// GET
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);
  }
}

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

이용하는 방식

axios({
    // request
    method: "get",
    url: "url",
    responseType: "type"
}).then (function (response){
    // response Action
})

같이 보내야 하는 정보

1. 어떤 메서드를 사용할 지 (get, post, delete, put)
2. url 주소
3. data (optional)
4. params (optional)

get 메서드 사용

axios.get(url[, config])

1. 지정된 단순 데이터 요청을 수행할 때 -> url 만 파라미터로 넘김

   async function getData() {
   try {
    //응답 성공
    const response = await axios.get('url주소');
    console.log(response);
   } catch (error) {
    //응답 실패
    console.error(error);
   }
   }

2. 사용자 번호에 따라 다른 데이터를 불러오는 경우 -> url 과 함께 params:{ } 객체도 파라미터로 넘긴다.

   async function getData() {
   try {
    //응답 성공
    const response = await axios.get('url주소',{
      params:{
        //url 뒤에 붙는 param id값
        id: 12345
      }
    });
    console.log(response);
   } catch (error) {
    //응답 실패
    console.error(error);
   }
   }