[React] Ajax란?

개요

이제 프로젝트 서버 통신을 할 시간이 왔다! 안드로이드에서는 Retrofit2와 OkHttp3를 사용해서 했었는데 과연 React에서는 어떤 것을 사용하는지 알아보다가 Ajax라는 것을 알게 되었고, 학습하기 위해 그 내용을 정리해본다.

 

1. Ajax란?

AJAX는 Asynchronous JavaScript And XML로 해석하면, 비동기 자바스크립트와 XmL이다.

 

즉, 웹 페이지를 전체 새로고침하지 않고, 서버와 비동기적으로 데이터를 주고받아서 일부 내용만 동적으로 갱신할 수 있도록 하는 웹 기술이다.

 

XMLHttpRequest 방식이 있고, fetch API 방식이 있는데 여기서는 fetch API로 설명하겠다.

1-1. 사용 이유?

1) 일부 영역만 동적으로 갱신-> 화면이 깜빡이지 않기 때문에 더 부드럽고 자연스러운 사용자 경험을 느끼게 할 수 있다.-> 페이지 전환에 소요되는 시간을 최소화한다.

 

2) 빠른 응답 속도-> 비동기 통신으로 인해 사용자는 기다리는 시간 없이 계속해서 인터렉션이 가능하다.-> 즉, 요청-응답을 기다리는 동안 사용자는 다른 입력이 가능하다.

 

3) 네트워크 트래픽 감소-> 전체 페이지를 다시 받지 않고, 필요한 데이터만 주고받기 때문에 데이터 크기가 작아 서버 부하가 감소한다.

 

4) 세션 유지에 유리함

-> 전체 페이지를 새로고침 하지 않기 때문에, 세션이나 쿠키 상태를 안정적으로 유지할 수 있다.

 

1-2. 동작 원리

1) 사용자 이벤트 발생

-> 버튼 클릭, 폼 제출, 스크롤, 입력 등 사용자가 이벤트를 발생시킨다.

 

2) JavaScript가 이벤트 핸들러에 호출되고, fetch 객체를 생성한다.

fetch('/user/1'); // Promise 기반

 

3) 서버에 비동기로 요청을 전송한다.

fetch('/user/1')
  .then(res => res.json())

 

4) 서버에서 요청을 처리한다.

 

5) 그 뒤, 처리한 응답을 수신하고 처리한다.

fetch('/user/1')
  .then(res => res.json())
  .then(data => {
    console.log(data.name); // "홍길동"
  });

 

1-3. 사용 방법

GET 요청

function fetchPost() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
      if (!response.ok) throw new Error('서버 오류');
      return response.json();
    })
    .then(data => {
      console.log('응답 데이터:', data);
      document.getElementById('post').innerHTML = `
        <h3>${data.title}</h3>
        <p>${data.body}</p>
      `;
    })
    .catch(error => {
      console.error('에러 발생:', error);
    });
}

 

: fetch(url)

-> 비동기 요청을 보내는 함수

 

: .them(res =? res.json())

-> 응답에 대해서 JSON 객체로 파싱

 

: .catch()

-> 에러 발생 처리

 

POST

function fetchPostData() {
  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: '새 글',
      body: '내용입니다.',
      userId: 1
    })
  })
  .then(res => res.json())
  .then(data => console.log('응답:', data))
  .catch(err => console.error('에러:', err));
}

 

: headers

-> application/json 형태로 서버에 보낸다는 것을 알려줘야함!

 

1-4. Ajax 단점

1) 히스토리 문제

-> Ajax는 페이지 이동 없이 콘텐츠만 바꾸기 때문에, 뒤로 가기를 눌러도 원래 상태로 돌아가지 않고 화면만 바뀐다.

 

2) 초기 로딩 속도 증가 가능성

-> 초기 렌더링 시 HTML이 비어있고, 따로 데이터를 받아와야 하기 때문에 느린 네트워크 환경에서는 빈 화면이 오래 보일 수 있다.

 

이런 한계점들은 극복할 수 있는 방식이 있기 때문에, 잘 찾아보고 또 정리해보자!