React JS(axios와 fetch)

SPA(싱글페이지어플리케이션)은 단일 페이지로 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공한다. 페이지 간 이동시, 페이지 갱신에 필요한 데이터만을 전달받아 갱신하여 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 렌더링하지 않고 변경되는 부분만을 갱신하여 새로고침이 발생하지 않아 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 기대할 수 있다.

 

SSR은 먼저 서버에서 응답 값을 만들어서 내려주고, 그 이후에 static file(정적파일) 을 내려준다.

정적파일을 다 내려받고, 리액트 앱을 브라우저에서 실행한 뒤에는 SPA(싱글페이지어플리케이션)처럼 동작하게 됨.

---

통신에 대해알아보자꾸나.

 

React에서 많이 사용하는 Axios와 fetch의 차이점을 알아보자.

 

Axios 공식 문서에 따른 특징

• 브라우저를 위해 XMLHttpRequests생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

간단하게 찾아본 차이점. 

 

axios는 모듈 설치가 필요하다.

• promise 기반으로하여 데이터를 다루기가 쉽다.
• fetch보다 많은 기능을 지원한다.

fetch는 JavaScript 내장 라이브러리다.

• fetch method를 사용하면 다운로드가 어느정도 진행이 되었는지 알 수 있다.
• 요청이나 응답에 대해서 메모리에 오래 남도록 캐싱할 수 있다.
• CORS나 Cache를 컨트롤 할 수 있다.
• 요청을 중단할 수 있는 객체인 Abort Controller를 제공.

 

대부분 axios가 fetch보다 많은 기능을 지원하고 문법이 조금이나마 간소화 된다는 장점이 있다고 한다.

간단하게 사용할 때에는 fetch를 사용하고, 이외의 확장성을 염두해 보았을 때에는 axios를 사용하면 좋다고 본다.

 

여러방식으로 데이터를 받아왔는데 배웠던 방식이 제일 깔끔한것같다.