[React] Axios를 왜 써야하며, 사용하여 HTTP 요청 하기

서론

Axios는 브라우저 기반 JavaScript 애플리케이션과 Node.js 애플리케이션 모두에서 HTTP 요청을 만들기 위한 약속 기반 HTTP 클라이언트입니다. 비동기 HTTP 요청을 REST 끝점으로 보내고 CRUD 작업을 수행하기 위한 사용하기 쉬운 API를 제공합니다. 단순성, 사용 용이성 및 다양한 플랫폼 간의 호환성으로 인해 JavaScript 커뮤니티에서 널리 사용됩니다.

 

왜 Axios를 사용해야 할까요?

• 단순성과 사용 용이성: Axios는 개발자가 최소한의 구성으로 HTTP 요청을 수행할 수 있는 간단한 API를 통해 구현이 간단합니다.
• Promise 기반: JavaScript Promise를 활용하여 깔끔하고 읽기 쉬운 비동기 코드를 작성할 수 있습니다.
• 인터셉터: Axios를 사용하면 HTTP 요청 및 응답을 가로채서 데이터를 전송하기 전이나 받은 후에 데이터를 변환하거나 수정할 수 있으므로 사전 요청 인증 또는 전역 오류 처리를 처리하는 강력한 도구가 됩니다.
• 자동 JSON 데이터 변환: JSON 데이터를 보내거나 받을 때 Axios는 JSON 데이터를 자동으로 변환하여 상용구 코드를 줄입니다.
• 광범위한 브라우저 지원: Axios는 브라우저에서 실행될 때 'XMLHttpRequests'를 사용하여 최신 웹 브라우저 전반에 걸쳐 광범위한 지원을 제공합니다.
• Node.js 지원: Node.js 환경에서 Axios는 기본 http 및 https 모듈을 활용하여 서버 측 HTTP 요청을 활성화합니다.

 

Axios 사용의 장점

• 단순성: 사용하기 쉽고 모든 JavaScript 애플리케이션에 통합됩니다.
• 인터셉터: 요청 및 응답 처리를 자동화하는 방법을 제공합니다.
• 자동 JSON 변환: JSON 데이터 작업을 단순화합니다.
• 브라우저 및 Node.js 지원: 다목적이며 다양한 환경에서 사용할 수 있습니다.
• 취소: 불필요한 네트워크 활동을 방지하는 데 유용한 요청 취소 API를 제공합니다.

 

Axios 사용의 단점

• 크기: 기본 fetch에 비해 Axios는 더 큰 라이브러리이므로 성능에 민감한 애플리케이션에 고려할 수 있습니다.
• 오버헤드: 매우 간단한 요청의 경우 Axios는 fetch와 같은 기본 브라우저 API에 비해 불필요한 복잡성을 도입할 수 있습니다.
• 하나 이상의 종속성: 타사 라이브러리에 의존하면 잠재적인 보안 취약점이 발생할 수 있으며 라이브러리를 최신 상태로 유지해야 합니다.

 

Axios의 대안

• Fetch API: 대부분의 경우 Axios를 대체할 수 있는 최신 Promise 기반 기본 브라우저 API입니다. 모든 최신 브라우저에서 지원되지만 이전 브라우저의 경우 폴리필이 필요할 수 있습니다.
• SuperAgent: 유연성, 가독성 및 낮은 학습 곡선을 위해 특별히 제작된 경량의 프로그레시브 Ajax API입니다.
• got: 단순성과 성능에 중점을 둔 Node.js용 단순화된 HTTP 요청 라이브러리입니다.
• ky: 단순성과 사용 편의성을 위해 설계된 Fetch API 기반의 작고 우아한 HTTP 클라이언트입니다.

 

Axios 사용 예

다음은 React에서 API에서 데이터를 가져오기 위해 Axios를 사용하여 GET 요청을 만드는 방법에 대한 간단한 예입니다.

// 해당 데이터를 전달할 API URL 주소 뒤에 들어오는 부분은 GET으로 전달할 데이터들
// 예시 ?파라미터 or /파라미터 해당 상황에 맞게 전달하시면 됩니다.
axios.get('ApiUrl/Parameter')
  .then(response => {
  	// 서버에서 전달 받은 메세지
    console.log(response.data);
  })
  .catch(error => {
  	// 에러
    console.error(error);
  });

 

다음은 React에서 API에서 데이터를 가져오기 위해 Axios를 사용하여 POST 요청을 만드는 방법에 대한 간단한 예입니다.

// 전송할 Data
const postData = {
  title: '제목를 입력합니다.',
  content: '보낼 내용을 입력합니다.',
  userId: 1,
};

// 해당 데이터를 전달할 API URL 주소
const url = URL;

axios.post(url, postData)
  .then(response => {
    // 서버에서 전달 받는 메세지
    console.log('Data posted successfully:', response.data);
  })
  .catch(error => {
    // 오류 메세지
    console.error('Error posting data:', error);
  });

 

Axios는 JavaScript 또는 Node.js 애플리케이션에서 HTTP 요청을 처리하기 위한 강력한 솔루션을 제공합니다. 추가 번들 크기 및 간단한 요청에 대한 잠재적 오버헤드와 같은 단점이 있지만 사용 용이성, 기능 세트 및 광범위한 호환성으로 인해 개발자에게 인기 있는 선택입니다.