개발/React (페이지 제작과정)

axios란 뭘까?

후엥_ 2023. 8. 26. 00:03
728x90
반응형

내가 직접 작성한 axios 코드

난 지금까지 axios를 사용하면서 살실 axios를 왜 쓰는지 몰랐다! 그냥 클론코딩으로 시작하다 보니 그냥 써보니 돼서 그냥 대충 이런 구조로 작성하면 실행되는구나를 깨달았고 그냥 이유는 모르지만 쓰고 있다. 근데 열받는 건 잘 된다는 거다. 그래서 공부를 하지 말까?라는 고민도 했지만 그 시점쯤에 문제가 생겼다.

 

axios를 왜 알아야 할까?

단순하게 한마디로 정리하자면 서버와 통신하기 위해서이다. 우리가 웹사이트를 만들때 정적인 데이터만 보여주고 싶지는 않을 것이다. 그럼 지속적으로 서버와 통신을 하고 요청을 하고 데이터를 받아와야 하는데 그 기능을 하는 게 axios라고 보면 된다. 

 

정확하게 axios가 뭘하는 애인가?

  • Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트
    • HTTP요청 처리를 한다
    • Promise 기반이라 비동기 요청을 하기 용이하다
  • 에러처리가 편리하다
    • catch 문을 사용하면 간단하게 Error시 실행할 코드를 작성할 수 있다.
  • 간단한 구문이 존재한다.
    • GET, POST, PUT, DELETE 등의 HTTP 메서드를 사용할 수 있다.
  • CSR 및 SSR 지원
    • 클라이언트 사이드 렌더링과 서버사이드 렌더링을 지원한다.
      여기서 전에 문제가 발생했어서 다른 글로 설명해 주겠다.

 

어떻게 사용해야 할까?

npm install axios

일단 사용하기전 axios 라이브러리를 설치 후 사용할 수 있다. 그래서 npm으로 설치 후에 원하는 axios 코드를 작성하면 정상적으로 작동할 것이다.

 

axios 기본 예제

import axios from 'axios';

// Axios를 사용하여 HTTP 요청을 보내는 예제
axios.get('https://api.example.com/data')
  .then((response) => {
    // 성공적으로 데이터를 받았을 때 처리할 코드
  })
  .catch((error) => {
    // 에러 발생 시 처리할 코드
  });

위 코드를 이해해 보자 .

 

일단 import axios form 'axios' 부분은 axios를 불러온다는 내용이다. (이건 기초적인 거니 넘어가려다가 모르는 사람이 있을 것 같아서..

 

axios.get('https://api.example.com/data')  이 내용은  axios를 이용하여 링크에 get 요청을 보내겠다는 말이다. 

. then 부분은 성공 시 실행할 코드 부분이다. response에 서버에서 받아온 데이터가 저장된다. 그러니 response를 이용하여 데이터를 활용해야 한다.

 

. catch 부분은 에러가 발생할 때 처리할 코드이다. 그리고 error에 error의 데이터가 담기게 된다. 보통 저기에는 console.log(error)이 담기게 된다. 

 

 

자 근데 메서드는 get 한 가지가 아니다. 다음 포스팅에서는 다양한 메서드를 설명해 보도록 하겠다. 

 

728x90
반응형