Abort Controller

🔥 AbortController

• DOM 요청과 통신 혹은 취소시 사용하는 abortSiganl객체 인터페이스를 반환한다. (읽기 전용) 해당 signal 을 네트워크 요청시 같이 담아서 취소할수 있는 역할을 담당한다.
• 비동기 요청이 완료되기 전 abort 메소드를 통하여 해당 비동기 요청을 취소할 수 있다.

---

문제

input에 값이 입력될 때마다 검색결과가 나오는 기능을 구현하고자 한다. 하지만 onChange가 이루어질 때마다 서버로 요청을 보내면 2가지 문제가 발생한다.

1. race condition에 따라 응답 순서가 엉켜 원하지 않는 검색결과를 보여줄 수 있다.
2. 서버에 과도한 요청을 보내 부하를 일으키는 원인이 될 수 있다.

Debounce는 저번 게시글에서 구현을 해보았으니 이번에는 Abort Controller를 통해 1번 문제를 해결해본다...!

useAbort Hooks를 생성한다.

// useAbort.ts

import { useEffect, useState } from "react";
import { ICharacter } from "./types";

interface IUseAbort {
  data: ICharacter[];
  isLoading: boolean;
  error: Error | null;
}

const useAbort = (keyword: string): IUseAbort => {
  const [data, setData] = useState<ICharacter[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 검색어의 길이가 0이라면 실행하지 않는다. 
    if (keyword.length === 0) return;
    
    // abortController 객체를 생성한다.
    let abortController = new AbortController();
    const fetchData = async () => {
      try {
        const response = await fetch(
          `https://swapi.dev/api/people?search=${keyword}`,
          // signal을 전달한다.
          { signal: abortController.signal }
        ).then((res) => res.json());

        setIsLoading(false);
        setData(response.results);
      } catch (error: any) {
        if (error.name === "AbortError") {
          setError(error);
          setIsLoading(false);
        }
      }
    };
    fetchData();
    return () => {
      // 클린업 함수로 요청을 취소하는 abort()를 실행한다. 
      // 이는 응답이 오기 전에 이 hooks가 재실행되면 현재 진행중인 요청을 취소하는 역할을 한다.
      abortController.abort();
    };
  }, [keyword]);

  return { data, isLoading, error };
};

export default useAbort;

사용

// App.tsx
import React, { useCallback, useState } from "react";

import useAbort from "./useAbort";

function App() {
  const [keyword, setKeyword] = useState("");
  const { data } = useAbort(keyword);

  // keyword가 변경될 때마다 useAbort가 실행된다.
  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    setKeyword(e.target.value);
  }, []);

  return (
    <div className="App">
      <form>
        <input type="text" onChange={handleChange} value={keyword} />
      </form>
      <ul>
        {data?.map((item, i) => (
          <li key={i}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

이렇게 `abortController`를 사용하면 응답 순서를 동기적으로 수행하게 할 수 있다. 좀 더 정확하게 말하면 채팅을 아주 빠르게 입력하였을 때 마지막 keyword를 제외한 요청들은 abort()에 의해 취소될 것이다.