AJAX(Asynchronous JavaScript and XML)

AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 교환할 수 있게 하는 기술입니다. AJAX를 사용하면, 웹 페이지 전체를 다시 로드하지 않고도 일부분만을 업데이트할 수 있습니다. 이는 웹 애플리케이션의 반응성과 속도를 크게 향상시킵니다.

AJAX의 작동 원리

1. XMLHttpRequest 객체 사용: 브라우저는 XMLHttpRequest 객체를 제공하여 서버에 비동기 요청을 보낼 수 있습니다. 최근에는 더 새롭고 강력한 **fetch API**가 도입되어 AJAX 요청을 처리하는 주요 방법으로 자리 잡았습니다.
2. 서버 요청: 웹 애플리케이션은 서버에 데이터를 요청하거나 전송할 때 XMLHttpRequest 객체나 **fetch API**를 사용합니다. 이 요청은 사용자와의 상호작용이나 이벤트에 의해 트리거될 수 있습니다.
3. 서버 응답 처리: 서버로부터 응답을 받으면, 해당 응답을 처리하여 웹 페이지를 동적으로 업데이트합니다. 응답 데이터 형식은 XML, JSON, HTML 등이 될 수 있으나, 현재는 JSON이 가장 널리 사용됩니다.
4. 페이지 일부 업데이트: DOM 조작을 통해 웹 페이지의 일부분만을 업데이트함으로써, 전체 페이지를 새로고침하지 않고도 내용을 변경할 수 있습니다.

예시: XMLHttpRequest 사용하기

var xhr = new XMLHttpRequest();
xhr.open("GET", "<https://api.example.com/data>", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 서버 응답 출력
    // 응답을 처리하여 웹 페이지 업데이트
  }
};
xhr.send();

예시: fetch API 사용하기

**fetch API**는 Promise 기반의 현대적인 대안으로, AJAX 요청을 보다 간결하게 처리할 수 있습니다.

fetch("<https://api.example.com/data>")
  .then(response => response.json()) // 응답을 JSON 형식으로 파싱
  .then(data => console.log(data)) // 데이터 처리
  .catch(error => console.error("에러 발생:", error));

AJAX의 장점

• 웹 페이지의 일부분만을 업데이트하여 사용자 경험을 개선할 수 있습니다.
• 페이지의 불필요한 전체 새로고침 없이 데이터를 서버와 교환할 수 있습니다.
• 동적인 웹 애플리케이션과 리치 인터넷 애플리케이션(RIA) 개발에 적합합니다.

AJAX는 현대 웹 개발에서 필수적인 기술 중 하나로, 웹 애플리케이션의 인터랙티비티와 속도를 크게 향상시킬 수 있습니다.

 

 

리액트에서는 기본적으로 AJAX를 사용하는가?

 

리액트(React) 자체는 UI 라이브러리이며, AJAX 호출 같은 데이터 가져오기 또는 서버와의 통신 기능을 직접 제공하지 않습니다. 리액트는 주로 컴포넌트 기반의 UI를 구성하는 데 초점을 맞추고 있으며, 서버와의 비동기 통신을 포함한 데이터 관리는 개발자가 선택한 방법이나 라이브러리를 사용하여 구현해야 합니다.

그러나 리액트 애플리케이션에서 AJAX 호출을 사용하는 것은 매우 일반적인 패턴입니다. 데이터를 서버로부터 가져오거나 서버에 데이터를 보내기 위해 AJAX 요청을 수행할 수 있으며, 이를 위해 JavaScript의 내장 함수인 **fetch API**나 서드 파티 라이브러리인 **axios**와 같은 HTTP 클라이언트를 주로 사용합니다.

fetch API 예시

리액트에서 **fetch API**를 사용하여 비동기적으로 데이터를 가져오는 간단한 예시는 다음과 같습니다.

useEffect(() => {
  fetch('<https://api.example.com/data>')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
}, []);

axios 예시

**axios**는 HTTP 요청을 쉽게 만들 수 있는 JavaScript 라이브러리입니다. **axios**를 사용하려면 먼저 라이브러리를 프로젝트에 설치해야 합니다.

bashCopy code
npm install axios

설치 후 리액트 컴포넌트에서 사용할 수 있습니다.

import axios from 'axios';

useEffect(() => {
  axios.get('<https://api.example.com/data>')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));
}, []);

 

더 많은 참고

https://call203.tistory.com/49

[React] React 처음이라면... React란 ? React의 핵심