[React] AbortController를 활용해 비동기 작업을 효과적으로 제어하는 법

주니어 개발자를 위한 React 실전 가이드 <1>

May 28, 2024

[React] AbortController를 활용해 비동기 작업을 효과적으로 제어하는 법

Contents

AbortController?AbortController 장점 AbortController 단점

🗣️

React 애플리케이션을 개발하다 보면 비동기 작업을 다루는 경우가 많습니다. 특히 네트워크 요청을 처리할 때, 사용자 경험을 향상시키고 불필요한 리소스 낭비를 방지하기 위해 적절한 관리가 필요한데요. 이때 AbortController를 활용하면 비동기 작업을 효과적으로 제어할 수 있습니다. 5년차 소프트웨어 엔지니어 현명 님이 주니어 개발자들이 알면 좋을 법한 AbortController의 기본 개념과 사용 방법을 알아보고, 실제 React 애플리케이션에서 어떻게 활용할 수 있을지 알려드릴 것이니, 비동기 작업 관리에 대해 확실히 짚고 넘어가고 싶은 분들은 이번 아티클에 주목해주세요.

AbortController?

AbortController는 JavaScript에서 제공되는 기능 중 하나로, 비동기 작업을 취소하는 데 사용됩니다. 주로 Fetch API와 함께 사용되어 네트워크 요청을 중단하거나 프로미스를 취소하는 데 활용이 되죠. 이것은 주로 웹 애플리케이션에서 사용자 경험을 향상시키거나 불필요한 네트워크 요청을 방지하는 데 유용합니다.

제가 AbortController를 사용하게 된 이유는 Next.JS에서 React를 사용하여 개발하던 중에 발생한 문제 때문이었습니다. router.query의 값을 이용하여 live data를 보여주는 parameter로 사용하는데, 네트워크 지연 때문에 이것이 올바르게 보이지 않을 경우가 있더군요.

간단한 사용 방법 예제를 보여드리겠습니다.


// AbortController 객체 생성
const controller = new AbortController();
const signal = controller.signal;

// 비동기 함수 정의
const fetchData = async () => {
  try {
    // Fetch API를 사용하여 데이터 가져오기
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', { signal });

    // 응답 확인 및 데이터 출력
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    console.log('Data:', data);
  } catch (error) {
    // 요청이 중단되었는지 확인하고 에러 처리
    if (controller.signal.aborted) {
      console.log('Request aborted:', error.message);
    } else {
      console.error('Error fetching data:', error.message);
    }
  }
};

// fetchData 함수 호출
fetchData();

// 몇 초 후에 AbortController를 사용하여 요청을 중단
setTimeout(() => {
  controller.abort();
  console.log('Request aborted manually.');
}, 2000);

아래는 이를 바탕으로 실제로 적용한 예제입니다.


const fetchData = async () => {
  const controller = new AbortController();
  const signal = controller.signal;
  try {
   const res = await axios.get(`/api/test?id=${router.query.id}`, { signal, ...config });
   if (res.status === 200) {
    if (res.data[0][0].IsReady) {
     setReady(true);
    } else {
     setReady(false);
    }
   }
  } catch (error) {
   console.error(error);
  }
  return () => {
   controller.abort();
  };
 };

AbortController 장점

AbrotController를 사용하면 다음과 같은 장점을 얻을 수 있습니다.

1. 사용자 경험 개선

사용자 경험을 크게 개선할 수 있습니다. AbortController를 사용하면 사용자가 페이지를 떠나거나 다른 동작을 수행할 때 현재 진행 중인 네트워크 요청을 즉시 취소할 수 있습니다. 이를 통해 불필요한 데이터 전송을 막고, 더 나은 사용자 경험을 제공할 수 있습니다.

2. 리소스 관리

리소스 관리 측면에서도 AbortController는 큰 도움이 됩니다. SPA(Single Page Application)에서는 페이지 이동 시 컴포넌트가 언마운트 되거나, 더 이상 페이지가 필요하지 않은 상황일 때, AbortController를 사용하여 불필요한 네트워크 요청을 중단할 수 있습니다. 이런 점은 SPA(Single Page Application)에서 이점으로 작용합니다.

3. 에러 핸들링

AbortController를 사용하면 에러 핸들링이 수월해집니다. 네트워크 요청이 중단되었을 때 적절한 에러 핸들링을 해주어야 하는데, AbortController의 signal 속성을 통해 작업이 중단되었는지 확인하고, 그에 맞는 에러 메시지를 출력할 수 있습니다.

AbortController 단점

AbrotController는 많은 장점을 가지고 있지만, 몇 가지 단점도 고려해야 합니다.

1. 호환성 문제

호환성에 문제가 있을 수도 있습니다. 대부분의 최신 브라우저에서는 AbortController를 지원하지만 모든 브라우저가 AbortController를 지원하는 것은 아니므로 특정 상황에서 호환성 문제가 발생할 수 있는 점을 염두에 두셔야 합니다.

2. 프로미스 중첩

AbortController를 사용하다 보면 프로미스 중첩 문제가 발생할 수 있습니다. 비동기 작업을 중단하려면 프로미스를 중첩해서 사용해야하기 때문에 코드가 복잡해질 수 있는 상황이 생길 수 있죠.

3. 프로미스 취소의 한계

AbortController를 사용한 프로미스 취소에는 한계가 있을 수 있습니다. AbortController로 비동기 작업을 중단하는 것은 프로미스가 생성되고 이미 시작된 이후에만 가능합니다. 따라서 프로미스가 즉시 완료되거나, 이미 진행 중인 네트워크 요청을 중단하는 것은 어려울 수 있습니다.

AbortController는 주로 SPA같이 사용자 경험에 중점을 둔 웹 애플리케이션에서 특히 유용하게 쓰일 수 있습니다. AbortController를 사용할 때 위에서 언급한 장단점을 고려해서 상황에 맞게 적절하게 활용하셔서 사용자 경험을 향상시키고 애플리케이션 성능을 최적화시키셨으면 좋겠습니다. 주니어 개발자들이 많은 도움을 받기 바라며 마칩니다.

🚢 개발자 이직 준비, 어떻게 시작해야 할지 모르겠나요? 한 단계 더 도약하는 험난한 항해에서 든든한 메이트가 되어드리겠습니다.

성장의 한계를 느끼고 있는 주니어 개발자들은 항해 플러스와 함께 하시면 됩니다. 기본기 역량 강화부터, 커리어 점프시켜 줄 TDD/성능최적화 프로젝트와 이직 코칭까지 한번에 할 수 있습니다. 성장을 향한 강한 의지만 있다면 항해 플러스 10주 성장 코스로 이직을 도전해보세요.

CREDIT

글 | 소프트웨어 엔지니어 김현명