인프런 커뮤니티 질문&답변

useEffect(() => {
  const controller = new AbortController();
  const fetchPosts = async () => {
    try {
      setIsLoading(true);
      const { data } = await axiosInstance.get(
        `/posts?_page=${currentPage}&_limit=${limit}&q=${encodeURIComponent(searchText)}`,
        {
          signal: controller.signal,
        },
      );
      setPosts(data);
    } catch (e) {
      console.log(e);
      if (e instanceof Error && e.name !== "CanceledError") {
        if (e.message.includes("timeout")) {
          setError("timeout 오류 발생");
        } else {
          setError(e.message);
        }
      }
    } finally {
      if (!controller.signal.aborted) setIsLoading(false);
    }
  };
  fetchPosts();
  return () => {
    controller.abort();
  };
}, [currentPage, limit, searchText]);

처음 실행 시(새로고침)

console.log(e)

에서

CanceledError {message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED', config: {…}, request: XMLHttpRequest, …}

이렇게 무조건 잡히는데 왜 그럴 까요? 물론 프로그램 실행 에는 문제가 없습니다.