[React-Query] 1. 리액트쿼리 들어가기 전 Axios 알아보기

회사에서 처음으로 참여한 프로젝트에서 데이터 패칭 라이브러리로 리액트 쿼리를 사용하였다.

처음에는 데이터 패칭 개념조차 이해못했는데,

어찌저찌 하다보니 사용은 하고 있는 중이다...

 

이 참에 axios와 react-query를 정리해보고자 한다.

이 글에서는 먼저 axios를 정리해보았다.

 

 

Axios

자바스크립트 어플리케이션에서 서버와 통신할 때(=데이터를 가져올 때) 사용되는 HTTP 비동기 통신 라이브러리이다.

현대 웹 환경에서 서버에서 데이터를 받아오는 일은 이 라이브러리를 기반으로 이루어지고 있다.

자바스크립트에서는 fetch API가 있지만 리액트에서 네트워크 통신은 보통 axios를 사용한다.

(fetch와 ajax와 axios의 차이점은...?) 아래의 글을 확인해보자

https://hyriverstudy.tistory.com/32

Ajax와 Axios와 fetch 정리

 

특징

✅ 브라우저를 위해 XMLHttpRequests(XHR) 객체 생성

* XMLHttpRequests : 서버와 주고받는 데이터를 쉽게 다를 수 있는 방법 중 하나로 비동기 통신을 담당하는 자바스크립트 객체이다.

ajax의 통신 객체이기도 하며, 현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다. XMLHttpRequest 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있다.

즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만 갱신할 수 있다.

✅ Promise 기반으로 만들어져서 데이터 다루기가 편리하다

✅ http 요청과 응답을 JSON형태로 자동으로 변경해준다

✅ 브라우저 호환성이 뛰어나다

 

요청 Config

axios의 요청 config에 여러가지 정보들을 작성하여 전송하면 서버와 연결할 수있으며, 새로운 Axios 인스턴스를 만든다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

• url : 서버 주소(필수)
• method : 통신방법(get, post, put, delete) - 따로 지정하지 않으면 GET이 기본값
• baseURL : 서버주소(url) 앞에 붙는 주소
• timeout : timeout보다 요청이 길어진다면 요청은 취소된다(기본값은 0, 타임아웃 없음)
• headers : 사용자 지정 헤더. http 요청 헤더에 추가 정보를 제공하는데 사용
• transformRequest : 데이터를 서버로 전송하기 전 데이터 변환작업
• transformResponse : 데이터를 전달 받기 전 데이터 변환작업
• params : 요청 시 서버에 필요한 추가적인 정보를 함께 전달하는 url 파라미터이며 객체형태(null, undefined는 url에 렌더링되지 않음). query의 경우에만 사용한다. path에도 정상작동되지만 불필요한 정보를 전달하므로 사용하지 않음.

params: { courseSeq: 55, elementCnt: 10 }

데이터 요청 시 query로 courseSeq와 elementCnt를 전달해주어야하는 경우 위처럼 params를 이용한다. params로 url의 파라미터로 정보를 전달하며, courseSeq는 55, elementCnt는 10을 작성하면 url에 '?courseSeq=55&elementCnt=10' 이렇게 나타난다.

• responseType : 서버에서 받는 데이터 타입(arraybuffer, document, json, text, stream 등이며 json이 기본값)
• data : request body로 전송될 데이터 (param과 path와 request body의 차이점은 뭘까...?)

https://hyriverstudy.tistory.com/33

REST API에서 Path parameters와 Query parameters 그리고 requestbody

 

      axios({
        method: 'delete',
        url: `https://***`,
        headers: { Authorization: `Bearer ${accessToken}` },
        data: { courseSeq, userSeq }
      }),

이 요청 config에서는 method, url, headesr, data를 가지고 있다. method는 delete로 데이터의 삭제를 요청하는 연결이고, 해당 url에 연결이 된다. 그리고 무분별한 데이터 접근을 막기 위해 header의 Authorization에 토큰을 넣어 토큰값이 있어야 데이터에 접근할 수 있도록 한다. 여기서 Bearer은 HTTP 인증 프로토콜에서 토큰을 전달하는 방식 중 하나로 정보의 신호전달을 네트워크 단에서 손실 없이 그대로 전달하는 서비스이다. 즉 헤더에서는 Bearer와 API 인증 토큰을 조합하여 HTTP 요청 헤더에 추가함으로써, API 서버에서 해당 사용자가 인증되었는지 확인하고, 필요한 권한을 부여하여 API를 호출할 수 있도록 한다. data에 courseSeq와 userSeq는 requestbody로 전달되는 정보들이다.

 

응답 스키마

요청에 대한 응답으로 아래의 정보들을 포함한다.

• data : 서버가 제공하는 응답
• status : http 상태코드
• statusText : http 상태 메세지
• headers : http 헤더
• config : 요청을 위해 axios가 제공하는 구성

개발자 도구에서 네트워크를 들어가면 응답스키마를 확인할 수 있는것같다. 서버 연결한 Name을 클릭하면 header, preview 등이 나오는데 여기서 응답받은 data 내용과 http상태코드(status) 등을 확인할 수 있다.

 

Axios 단축 메소드

axios를 편리하게 사용하기 위해 모든 요청 메소드는 aliases(별명)가 제공된다.

위에 설명한 것처럼 객체 옵션을 이것저것 주면 가독성이 떨어지므로 함수형으로 재구성하여 나눠놓은 것으로 이해하면 된다.

 

GET: axios.get(url, [config])

POST : axios.post(url, [config])

PUT: axios.put(url, [config])

DELETE : axios.delete(url, [config])

 

프로젝트 진행할 때도 이 axios 단축 메소드를 사용했다. headers를 미리 설정한 후, 아래처럼 앞에 메소드를 대문자로 적어주고 괄호를 열어 필수로 작성해야하는 url과 기타 config를 입력해준다.

DELETE(`/user/***`, {
      params: { courseSeq, userSeq }
    });

 

여기까지 데이터를 연결하는 axios에 대해 정리를 했고,

다음 포스팅에서는 데이터 캐싱, 패칭 등의 기능을 좀 더 간편하게 만들어주는 라이브러리인 리액트 쿼리를 알아보자...~