Axios 간단하게 사용해본 리뷰

1. 데이터 요청 시 사용해본 기존 코드

useEffect(() => {
  fetch(`${LOGIN_URL}/users/signin/kakao`, {
    method: 'POST',
    body: JSON.stringify({
      code,
    }),
  })
    .then(res => res.json())
    .then(data => {
      localStorage.setItem('token', data.token);
      data.token ? navigate('/main') : alert('로그인에 실패하였습니다');
    });
}, []);

기존에 백엔드와 데이터를 주고 받기위한 fetch함수를 활용한 코드이다.
이번 프로젝트 때 라이브러리를 자유롭게 사용이 가능하다 해서 Axios를 사용해서 바꿔보기로 결정했다.

2. Axios사용 코드

useEffect(() => {
  axios({
    url: `${LOGIN_URL}/users/signin/kakao`,
    method: 'post',
    data: {
      code,
    },
    timeout: 3000,
  })
    .then(data => {
      localStorage.setItem('token', data.data.token);
      data.data.token ? navigate('/main') : alert('로그인에 실패하였습니다.');
    })
    .catch(err => {
      console.error(err);
    });
};

Axios 라이브러리를 install하고 fetch대신 axios를 사용해봤는데 이런 형식으로 작성한다고 한다.

2-1. Axios사용 간 오류사항

처음에 fetch함수를 사용했을 때 중간에 .then(res => res.json())으로 돌아오는 response에 대해 JSON으로 바꾸는 단계를 거쳐서 마지막에 .then(data => {localStorage.setItem('token', data.token)})으로 바로 JSON에 접근해서 'token'값을 담을 수 있었다.
하지만 Axios로 바꿔서 동일하게 .then을 사용해보니까 오류를 뱉는 것이였고 .then(res => res.json())에서 에러가 발생했다.

주변 동기들에게 질문하고 공식문서를 찾아보니 Axios의 특성상 JSON으로 바꾸지말고 데이터에 접근을 하나씩 해줘야 한다는 점을 새로이 알게 되었다.
그래서 console.log로 응답이 어떻게 오는지 살펴보고 data라는 key에 token이 담겨져 오는걸 확인하고 코드를 수정하니 정상적으로 token값이 로컬스토리지에 저장이 되는것을 확인했다. (그 이전엔 undefined로 계속 저장이 되어 오류를 뱉었음)

3. Axios를 적용한 두 가지 루트

3-1. axios안에 모든 정보를 담아서 요청을 보내기

• axios 함수 안에 url, method, data등 요청에 활용해야 할 부분들을 모두 작성하는 방법

  axios({
    url: `${LOGIN_URL}/users/signin/kakao`,
    method: 'post',
    data: {
      code,
    },
    timeout: 3000,
   })
     .then(response => {
       localStorage.setItem('token', response.data.token);
       data.data.token ? navigate('/main') : alert('로그인에 실패하였습니다.');
     });

3-2. axios에 메서드를 사용해서 요청을 보내기

• 메서드를 활용해서 요청을 하는 방법

  axios.post(`${LOGIN_URL}/users/signin/kakao`, { code }).then(res => {
      localStorage.setItem('token', res.data.token);
      res.data.token ? navigate('/main') : alert('로그인에 실패하였습니다.');
    });

3-3. 나의 개인적인 결론

• axios를 사용해보니 확실히 fetch함수를 사용했을 때 보다 좀 코드가 기존보다 간결해진 느낌을 받았다.
• axios메서드까지 같이 활용하니 시인성도 좋아지고 간결해지니 좋다고 생각되었다.