[React] 비동기 통신 Ajax 이해하기 | Axios 비교

Ajax: 비동기 웹 통신 기술의 핵심 이해하기

 

1. Ajax(Asynchronous JavaScript And XML)란?

• 정의: 웹 페이지 전체를 새로고침하지 않고, 서버와 데이터를 비동기적으로 교환하여 페이지 일부만 갱신하는 기술적 개념.
• 특징: 독립된 프로밍 언어가 아니라, 브라우저 내장 기능을 활용하는 방식임.
• 장점: * 사용자 경험(UX) 향상: 화면 끊김 없는 자연스러운 인터랙션 제공.
  • 자원 효율성: 필요한 데이터만 주고받아 네트워크 부하 감소.
• 대표 사례: 실시간 검색어, 무한 스크롤, 댓글 등록, 주식 시세 업데이트 등.

---

2. 비동기 통신(Asynchronous)의 이해

• 개념: 요청을 보낸 후 응답을 기다리는 동안 프로그램이 멈추지 않고, 다른 작업을 동시에 수행하는 방식.
• 처리 방식: 응답이 도착하면 콜백(Callback) 함수나 프로미스(Promise)를 통해 결과를 처리.
  
  
  

---

3. Ajax 구현을 위한 주요 기술 및 라이브러리

웹 기술의 발전에 따라 구현 방식이 진화해 왔습니다.

구분	특징	비고
XMLHttpRequest	전통적인 방식, 브라우저 내장 객체	콜백 기반으로 코드가 복잡함
fetch API	ES6 표준 API, Promise 기반	가독성이 좋으며 async/await와 궁합이 좋음
Axios	별도 설치가 필요한 라이브러리	HTTP 요청 취소, 자동 JSON 변환 등 편리한 기능 제공
jQuery Ajax	$.ajax() 형태의 라이브러리	과거 표준이었으나 최근 사용 비중 감소

---

4. 현대적인 데이터 처리: fetch & async/await

• fetch(url, options): 서버에 HTTP 요청을 보내는 함수. options를 통해 method, headers, body 설정 가능.
• async/await: 비동기 코드를 마치 동기 코드처럼 직관적으로 작성하게 해주는 문법.

---

5. 데이터 교환의 표준: JSON (JavaScript Object Notation)

• 특징: 텍스트 기반의 경량 데이터 형식. 사람과 기계 모두 읽기 쉬움.
• 핵심 메서드:
  • JSON.stringify(obj): 자바스크립트 객체를 JSON 문자열로 변환 (서버로 보낼 때).
  • JSON.parse(text): JSON 문자열을 자바스크립트 객체로 변환 (서버에서 받을 때).

💡 핵심 정리:

Ajax는 현대 웹 개발의 필수 요소입니다. 과거에는 XMLHttpRequest를 썼지만, 현재는 fetch API나 Axios를 async/await와 함께 사용하는 것이 표준입니다. 데이터 형식은 XML보다 JSON이 압도적으로 많이 사용됩니다.

fecth()API 가 Promise이기 때문에 비동기 통신이다. 
Axios는 JSON으로 데이터를 주고받는다. 

JSON이란

JSON (JavaScript Object Notation)은데이터를 저장하고 전송할 때 사용하는 경량의 데이터 형식으 로 텍스트 기반이기 때문에 사람이 읽기 쉽고, 기계도 분석하기 쉽다. 웹 클라이언트(브라우저)와 서버 간의 데이터 교환에 자주 사용된다