리액트 React | HTTP 클라이언트 데이터 통신: Ajax, Fetch, Axios

 

✅  HTTP 클라이언트(Client)

리액트(React)는 사용자 인터페이스를 구축하는데 초점을 두고 있어, 서버와 데이터를 주고받는 기능(HTTP 클라이언트)을 포함하지 않는다.

리액트(React)에서 서버와의 데이터 통신을 위해서는 별도의 HTTP 클라이언트를 사용해야 한다.

---

https://velog.io/@brian_kim

클라이언트와 서버는 개별적인 메시지 교환에 의하여 통신한다. 

HTTP 클라이언트는 HTTP 프로토콜을 사용하여 서버로부터 정보를 요청(requests)하고, 서버는 요청에 따라 적절한 응답(responses)을 반환한다.

---

https://velog.io/@kysung95

리액트(React)에서 API 요청을 할 때 페이지를 새로고침하지 않고 데이터를 가져오기 위해 Axios나 Fetch 라이브러리를 사용한다.

 

💡 HTTP, HyperText Transfer Protocol

https://developer.mozilla.org/ko/docs/Web/HTTP/Overview

HTTP는 인터넷에서 정보를 주고받는 방식을 규정한 클라이언트-서버 프로토콜이다.

HTTP는 애플리케이션 계층의 프로토콜로 TCP 혹은 TLS(암호화된 TCP 연결)를 통하여 전송한다. 

 

💡 비동기 Asynchronous

비동기(Asynchronous)란 작업을 순차적으로 실행하지 않고, 동시에 실행되는 방식이다.

웹 개발에서 페이지를 새로고침하지 않고도 서버로 데이터를 요청하고 받아올 수 있는 기능을 제공한다.

---

https://dkje.github.io/2020/09/20/AsyncAndEventLoop/

비동기 요청의 가장 대표적인 사례는 네트워크 요청이다.

비동기적인 방식을 사용하면, 페이지 전체를 다시 불러오지 않고 필요한 부분만 업데이트할 수 있다. 

---

비동기 HTTP 통신을 위하여 Ajax 웹 개발 기술을 사용한다.

 

✅ Ajax, Asynchronous Javascript And XML

https://dahye-jeong.gitbook.io/javascript/javascript/2019-01-25-ajax

JavaScript를 이용하여 비동기적(Asynchronous)으로 서버와 브라우저간의 데이터를 교환하는 전통적인 통신 방식이다.

 

💡 Ajax 동작 원리

1. Browser에서 서버로 보낼 Data를 Ajax Engine을 사용하여 서버로 전송한다.
2. Ajax Engine은 JavaScript를 통해 DOM을 사용하여 XHR 객체로 데이터를 전달한다. 
3. XHR 객체를 이용하여 서버에서 비동기 방식으로 데이터를 조회하는 것이다.

 

💡 XHR, XMLHttpRequest

https://jmoon.co.kr/160

웹 브라우저와 서버 간의 데이터 교환을 진행하는 객체로, 비동기적으로 정보를 전달하고 리소스를 요청한다.

XHR은 Event 기반으로 동작한다. 

• XHR 객체를 사용하여 HTTP GET 요청을 보내고 응답을 받을 때, state를 변경하는 이벤트를 발생시키고 onreadystatechange 이벤트 핸들러를 설정하여 감지한다.

xhr.onreadystatechange = function() {
  // 요청 상태가 4(DONE)일 때만 처리
  if (xhr.readyState === 4) {
    // HTTP 상태 코드가 200(성공)인 경우
    if (xhr.status === 200) {
      // 요청이 성공적으로 완료되었을 때의 처리
      console.log(xhr.responseText);
    }
    // HTTP 상태 코드가 200이 아닌 경우
    else {
      // 요청이 실패한 경우의 처리
      console.log('HTTP error', xhr.status, xhr.statusText);
    }
  }
};

---

 

http://elizabethjellison.com/blog/xhr.html

XHR 한계

• 다수의 이벤트 핸들러 설정과 요청 상태 체크 등 복잡한 프로세스를 활용하여 API 사용이 직관적이지 않다.
• 비동기 로직을 처리하기 위해 복잡한 콜백 구조 사용한다.
• 네트워크 오류와 HTTP 오류를 명확히 구분하지 않아, 오류 상황 발생 시 정확한 디버깅과 처리가 어렵다.
• 데이터를 업로드하거나 다운로드하는 동안, 진행 상태를 효과적으로 추적하기 어렵다.
• 브라우저의 동일 출처 정책을 따르므로, 다른 도메인으로 요청을 보내기 위해서는 서버 측에서 CORS를 지원해야 한다.

---

XHR 한계를 극복하기 위해 Axios나 Fetch 라이브러리를 사용할 수 있다. 

 

✅ Fetch

네트워크를 통해 데이터를 요청하고 받아오는 과정은 다양한 방법으로 이루어진다. 

그중 URL을 사용하여 데이터를 요청하는 방법이 가장 일반적이다.

• URL을 사용하여  비동기적인 네트워크 요청을 처리하고자 JavaScript의 내장 라이브러리 Fetch API를 사용한다.

---

Fetch API는 비동기 작업을 수행하고 Promise를 반환하는 강력한 web API이다. 

• Promise는 비동기 작업의 결과를 나타내는 객체로, 작업이 성공적으로 완료되면 resolve(해결)되고, 실패하면 reject(거부)된다. 
• then()과 catch() 메서드를 사용하여 Promise 체이닝을 구현하여 비동기 작업의 성공과 실패에 따른 처리를 연속적으로 작성할 수 있다.
• async 함수 내에서 await 키워드를 사용하여 비동기 작업의 결과를 기다리며 콜백 지옥(callback hell)을 해결한다.

fetch('http://domain/service')
  .then(response => {
    // HTTP 상태 코드가 200(성공)인 경우
    if (response.ok) {
      return response.text(); // 응답 데이터를 텍스트로 변환하여 반환
    } else {
      throw new Error('HTTP error ' + response.status); // 응답이 실패한 경우 에러 throw
    }
  })
  .then(data => {
    // 요청이 성공적으로 완료되었을 때의 처리
    console.log(data);
  })
  .catch(error => {
    // 요청이 실패한 경우의 처리
    console.log(error);
  });

 

💡 Fetch를 이용한 네트워크 요청

fetch API는 JavaScript에서 제공하는 기능으로, 특정 URL로부터 데이터를 가져오는 역할을 한다.

---

실시간으로 변하는 정보나 외부 서비스로부터 데이터를 받아와야 할 때 fetch API를 사용할 수 있다.

• 대표적으로 뉴스, 날씨 등과 같은 동적인 데이터를 가져온다.
• 요청과 응답이 비동기적으로 처리되기 때문에, 일정 시간이 소요되는 경우 브라우저에 로딩 상태를 표시하는 기능을 추가하여 사용자에게 시각적인 피드백을 제공한다.

 

✅ Axios 

 Node.js와 브라우저 환경에서 사용할 수 있는 외부 라이브러리로, HTTP 통신을 위해 설계되었다. 

서버와 클라이언트 간의 데이터 교환을 처리하기 위해 사용한다.

---

Axios는 비동기 작업을 수행하며, HTTP 요청을 보내고 응답을 받을 때 Promise를 반환한다. 

---

Axios는 Fetch API와 비교했을 때 브라우저 호환성 측면에서 향상되었다.

• Fetch API는 최신 브라우저에서 지원되지만 구형 브라우저에서는 지원되지 않는 경우가 있다.
• Axios는 모든 주요 브라우저에서 동작할 수 있다.

 

 

💡 Axios 사용하기

 axios 패키지를 설치하는 NPM 명령어이다.

•  axios를 프로젝트에 설치하고 종속성(dependency)으로 추가한다.

npm install axios --save

 

💡 Axios를 사용하여 영화 데이터 API를 가져오는 방법

 React에서 Axios를 사용하여 영화 데이터 API를 호출하고 가져오는 방법이다. 

---

터미널에 해당 명령어를 입력하여 Axios 패키지를 프로젝트에 설치한다.

npm install axios --save

---

Axios를 사용하여 영화 데이터를 가져올 API의 주소를 확인한다.

• YTS는 영화 데이터를 제공하는 API를 제공한다. 
• 해당 API의 문서를 확인하여 필요한 엔드포인트와 쿼리 파라미터를 파악한다. 

---

YTS API의 List Movies 엔드포인트를 사용한다.

---

App.js 파일에서 Axios를 import 한다. 

•  

// App.js
import axios from 'axios';

---

컴포넌트 클래스에서 componentDidMount 함수를 사용하여 API 호출을 수행한다. 

• 이 함수는 컴포넌트가 마운트 된 후에 자동으로 실행한다. 

getMovies라는 비동기 함수를 생성하고, axios.get() 함수를 사용하여 API를 호출하고, 반환된 응답 데이터를 처리한다.

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  componentDidMount() { // getMovies 함수를 호출한다.
    this.getMovies();
  }

  // getMovies 함수는 async 키워드로 비동기 함수로 선언한다.
  // await 키워드를 사용하여 Axios를 통해 GET 요청을 보내고, 반환된 응답 데이터를 response 변수에 저장한다.
  async getMovies() { 
    try {
      // 영화 목록을 가져오는 GET 요청을 보낸다.
      const response = await axios.get('https://yts.mx/api/v2/list_movies.json');
      
      // 응답에서 영화 목록을 추출한다.
      const movies = response.data.data.movies;
      
      // 추출한 영화 목록을 콘솔에 출력한다.
      console.log(movies);
      
      // 여기에 영화 데이터를 처리하거나 상태에 저장하는 로직을 추가할 수 있다.
    } catch (error) {
      // 요청이 실패하면 에러를 콘솔에 출력한다.
      console.error(error);
    }
  }

  render() {
    return <div>영화를 불러오는 중입니다...</div>;
  }
}

export default App;