React 비동기통신(axios)

참고링크
https://axios-http.com/docs/instance

React에서 비동기 통신을 적용하기 위해 조사를 해보았을 때

Axios와 fetch 라이브러리가 많이 언급이 되었다. 필자는 Axios 라이브러리를 활용하여 비동기 통신을 적용하였고 그 이유와 코드를 소개하려고 한다.

---

Axios 장단점

장점

• 많은 개발자들에게 널리 사용되는 HTTP 클라이언트 라이브러리입니다. 사용자 커뮤니티가 활발하며, 문제 해결 및 지원을 받기가 비교적 용이합니다.

• Axios는 간단하고 직관적인 API를 제공하여 HTTP 요청을 보내고 응답을 처리하는 것을 쉽게 할 수 있습니다. .then()과 .catch()를 사용한 Promise 기반의 비동기 코드 작성이 편리합니다.

• 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. 따라서 클라이언트 측과 서버 측에서 동일한 코드로 HTTP 요청을 처리할 수 있습니다.

단점

• 기본적으로 브라우저에서 사용하기 위해 전체 패키지를 가져오기 때문에 번들 크기가 상대적으로 큽니다. 이는 프로젝트에 따라 브라우저 로딩 시간이 늘어날 수 있는 단점이 될 수 있습니다.

---

Fetch 장단점

장점

• 브라우저에 내장된 API이기 때문에 별도의 라이브러리나 의존성을 추가로 설치할 필요가 없습니다. 모던 브라우저에서 기본적으로 지원되므로 추가적인 설정 없이 사용할 수 있습니다.

• Promise를 사용하여 비동기 작업을 처리합니다. 이로 인해 비동기 코드를 간결하고 직관적으로 작성할 수 있습니다. .then()과 .catch()를 사용하여 응답을 처리하고 오류를 처리할 수 있습니다.

• JSON 형식의 데이터를 지원합니다. response.json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 변환할 수 있습니다.

단점

• 모던 브라우저에서 제공되지만, 오래된 브라우저에서는 지원되지 않거나 일부 기능이 작동하지 않을 수 있습니다. 따라서 오래된 브라우저 호환성이 필요한 경우에는 추가적인 폴리필(polyfill)이 필요할 수 있습니다.

• 쿠키를 자동으로 처리하지 않습니다. 쿠키를 전송하거나 수신하는 작업에 대해서는 수동으로 처리해야 합니다. credentials 옵션을 설정하여 쿠키를 전송하거나 set-cookie 헤더를 수신받을 수 있습니다.

• 네트워크 오류(네트워크 연결 실패, CORS 오류 등)와 관련된 오류 처리가 상대적으로 제한적입니다. 오류 상태(400, 500 등)를 .catch()로 캡처하는 것 외에는 추가적인 처리가 필요할 수 있습니다.

---

결론

번들 크기가 상대적으로 크다는 단점이 있지만 현업의 프로젝트가 아닌 수준의 프로젝트는 크게 상관없다고 생각했고 코드가 간단하고 직관적인 Axios를 사용하여 빠르게 프로젝트 개발을 하기로 정했다.

---

사용방법

npm install axios

import axios from 'axios';

get 방식

axios.get(url)
  .then(response => {
    
    const data = response.data;
   
  })
  .catch(error => {
    console.error(error);
  });

url은 요청을 보낼 API 주소입니다. axios.get() 함수를 사용하여 GET 요청을 보내고, .then()을 사용하여 응답을 처리합니다. 응답은 response 객체로 전달되며, response.data를 사용하여 응답 데이터에 접근할 수 있습니다.

응답 데이터를 처리하기 위해 .then() 블록에서 해당 로직을 구현할 수 있습니다. 오류 처리를 위해 .catch() 블록을 사용하여 네트워크 오류나 기타 예외 상황을 처리할 수 있습니다.

---

post 방식

const data = {
  name: 'John',
  age: 30,
};

axios.post(url, data)
  .then(response => {
    // 응답 데이터 처리
    const responseData = response.data;
    // ...
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

post기 때문에 data를 보내기 위해 data가 추가된것 말고는 get과 굉장히 유사합니다.

---

프로젝트 적용코드

const [id, setId] = useState(false);
const [pw, setPw] = useState(false);

api.post("http://127.0.0.1:8000/login/", {
      username: id,
      password: pw,
})
.then(function (response) {
     const token = response.data;
     const IDinfo = id
     localStorage.setItem('IDinfo', JSON.stringify(IDinfo));
     localStorage.setItem('token', JSON.stringify(token));
                    
     usenavigate('/');
})
.catch(function (error) {
     setIsFailModalOpen(true);
     setErrormsg('ID 또는 비밀번호를 확인해주세요.');
});

useState로 id, pw를 관리하였고 해당 const를 이용하여 DRF url로 요청을하여 login 기능을 구현하였다.

Django고 상에서 id와 pw의 일치를 판단하는 로직을 구현해 놓았고 login이 실패시 catch로 빠지게 되고 ID 또는 비밀번호를 확인해 달라는 Modal창을 띄우는 코드를 구현했다.

login성공시 then으로 빠지게되고 response에는 Django 상에서 login시 생기는 token를 받아와 localStorage에 저장하는 코드다.

usenavigate를 활용하여 로그인 성공시 '/' (메인)페이지로 바로 이동하게끔 만들었다.

더 여러가지 axios를 활용한 비동기통신코드를 적용시켰지만 이정도만 소개하겠다.