[올해도 아좌좌] 비동기 처리 고찰

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 영상을 보며 내 코드를 어떻게 잘 수정할 수 있을지 고민하고있다.

현재 axios를 이용해 API에 요청처리를 하고 있는데
현재 내가 작성한 코드이다.

import { axiosInstanceClient } from '../axiosInstanceClient';

export const getAllPlans = async () => {
  try {
    const { data } = await axiosInstanceClient.get('/plans', {
      authorization: false,
    });
    console.log(data);
    return data;
  } catch (error) {
    console.log('Error:', error);
  }
};

위의 코드는 요청에서 try-catch를 사용하는것은 나쁘지는 않은 방법인데 가독성이 좋지않다. 성공과 실패의 경우가 서로 섞여서 처리되어 비즈니스 로직 즉, 내가 이 코드를 작성한 목적(핵심 로직)이 무엇인지 명확하게 보이지 않는다. 무엇보다 비동기 처리가 하나만 있는 경우는 문제가 되지 않지만 여러개가 섞여있는 경우 로직이 점점 복잡해지는 문제가 발생한다. (SWR, React Query를 사용해 훅을 만드는 경우에도)

그렇기 때문에 성공하는 경우만 다루도록 분리하려한다. 실패하는 경우는 이를 더 잘 처리할 수 있는 외부로 위임하도록 코드를 변경하려 한다.

이때 React의 Suspense를 이용하면

• 성공한 경우에만 집중 가능
• 로딩 상태와 에러 상태 분리 가능
• 비동기 상태를 마치 동기 상태처럼 사용 가능
  세 가지의 목적을 달성할 수 있다.

비동시 처리시 문제가 생긴다면 Suspense(로딩상태)와 ErrorBoundary(에러상태)를 분리하는 방식으로 해결해보려 한다.

사실 도구만 Next.js로 바뀌었을 뿐이지 이전 괴발개발 프로젝트를 하며 사용했던 기술인데 이렇게 보니 결국 기본은 React를 잘 다루는게 중요한 부분인 것 같다..!