리액트에서 axios로 데이터 불러올 때 오류 핸들링하기

나는 현재 진행중인 프로젝트에서

axios를 이용해 nest 서버의 데이터를 불러오도록 코드를 작성하였다.

하지만 서버가 꺼져있거나 데이터 바인딩이 잘못되어서

불러올 데이터가 없을때는 페이지 전체에 오류 메시지가 떠서

아예 페이지를 볼 수 없는 경우가 발생했다.

사실 나는 항상 서버를 같이 켜뒀고

데이터 바인딩도 직접 해서 이런 오류를 볼 일이

프로젝트 초반 이후로는 없었다.

 

그런데 팀원들과 사용중인 깃허브에 푸시하고

팀원이 풀 해서 코드를 실행하니 이런 오류가 발생하는 걸 보고나서야

문제를 인식할 수 있었다.

 

그래서 내가 데이터 로딩 오류를 해결한 방법은

axios에 catch문을 붙이는 것이었다.

현재 사용중인 코드에서 axios관련 코드는 아래와 같이

대부분 useEffect 아래에서 실행되었다.

 useEffect(() => {
    axios
      .get("http://localhost:8080/feed")
      .then((res) => {
        console.log(res.data);
        setData(res.data);
      });
    axios
      .get("http://localhost:8080/comment")
      .then((res) => {
        console.log(res.data);
        setComment(res.data);
      });
  }, []);

이러면 페이지를 로드 할 때마다 useEffect에 의해 axios 관련 코드가 실행되었고

불러올 데이터가 없는 경우 페이지 전체에 오류 메시지가 표출되어서 무척 불편했다.

 

그래서 아래와 같이 axios에 catch를 붙여줬다.

 useEffect(() => {
    axios
      .get("http://localhost:8080/feed")
      .then((res) => {
        console.log(res.data);
        setData(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
    axios
      .get("http://localhost:8080/comment")
      .then((res) => {
        console.log(res.data);
        setComment(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

이러면 오류가 발생했을 때 화면에 직접 오류를 뿌리는게 아니라

catch에 있는 코드를 실행시켜주기 때문에 오류가 발생하더라도

화면은 정상적으로 볼 수 있다.

 

아래 이미지는 앨범 커버 데이터와 피드 데이터를 불러오지 못했지만

정상적으로 화면을 보여주는 상황을 캡쳐한 것이다.

해결했으니 이제 catch에 대해서 조금만 더 알아보겠다.

axios는 promise 기반의 http 통신 라이브러리이다.

그래서 비동기적으로 http 통신을 가능하게 해주기 때문에

요청에 대한 응답을 기다리지 않고도 다음 작업을 수행할 수 있다.

 

그래서 axios의 기본적인 사용법은

axios.get().then().catch().then()을 사용하는 것이다.

여기서 get()은 post(), delete()등으로 변경될 수 있는 호출방법에 대한 정의이고,

then()은 정상적으로 응답을 받았을 때 실행할 코드,

catch()는 응답을 받지 못했을 때 실행할 코드,

then()은 응답을 받거나 말거나 항상 실행할 코드이다.

 

내 코드에서 문제가 생겼던 이유는

응답을 받지 못했을 때에 대한 처리 코드가 없었기 때문이고,

catch를 이용해서 응답을 받지 못한 상황에 대한 처리를 했기 때문에

페이지에 오류가 표출되는 상황을 해결할 수 있었다.

물론 f12를 눌러서 콘솔을 보면 오류가 찍혀있다.