React - AJAX

리액트에서의 AJAX 는 서버와 데이터를 주고 받을수 있는 기술임!

전체를 새로고침 또는 로딩을 하지 않고 일부분만 새로고침 할수 있는 특징이 있음

 

AJAX 의 기본원리

• 비동기 통신 - 서버에 요청을 보낸 후 응답을 기다리지 않고 다른 작업을 계속 할수 있음
• 부분 업데이트 - 웹페이지의 일부분만 새로고침

이때 서로 데이터를 주고받을때 주로 사용하는것 두가지 fetch, axios

axios 는 라이브러리! 설치해야 사용가능

 

AJAX 리액트에서 작동방식

1. 서버에 요청 전송 

2. 데이터 수신

3. 화면 일부 업데이트

 

주요 사용하는 곳 3가지

1. 컴포넌트 초기화 시 데이터 불러오기

2. 사용자 이벤트 처리 (좋아요, 댓글 작성 등등)

3. 주기적 데이터 갱신 (실시간 차트, 채팅 메세지 자동 새로고침 등등)

 

여러 API 호출 시 병렬처리 필요!!

// 순차적 처리 (느림)
const data1 = await fetch1();
const data2 = await fetch2();

// 병렬 처리 (빠름)
const [data1, data2] = await Promise.all([fetch1(), fetch2()]);

 

 

작성중...