[E-LOG] [warning]React Hook useEffect has a missing dependency

 

[warning]React Hook useEffect has a missing dependency

---

목차

오류 내용

원인

해결방법

---

 

---

[오류 내용]

<상황>

Route 관련 컴포넌트를 생성하던 중 발생한 경고이다.

 

<오류>

 

React Hook useEffect has a missing dependency: 
'requireAuth'. Either include it or remove the dependency array.
eslintreact-hooks/exhaustive-deps

[번역]

React Hook useEffect에 종속성이 누락되었습니다: 
'requireAuth'. 이를 포함하거나 종속성 배열 .eslintreact-Hooks/everse-deps를 제거하세요

 

---

[원인]

나의 코드

<나의 코드>

"use client";
import { useAuth } from "@/shared/hooks/useAuth";
import React, { useEffect } from "react";
import PageLoadingSpinner from "./PageLoadingSpinner";

type AuthGuardProps = {
    children: React.ReactNode;
    fallback?: React.ReactNode;
};

function AuthGuard({ children, fallback }: AuthGuardProps) {
    const { requireAuth, isAuthenticated, isLoading } = useAuth();

    useEffect(() => {
        requireAuth();
    }, [isAuthenticated, isLoading]);

    if (isLoading) {
        return fallback || <PageLoadingSpinner />;
    }

    if (isAuthenticated) {
        return null; // 리다이렉트 중
    }

    return <>{children}</>;
}

export default React.memo(AuthGuard);

 

<문제 원인>

useEffect()는 두 번째 인자로 의존성 배열을 받는다.

나는 useEffect안에서 requireAuth라는 함수를 사용했다.

하지만 함수가 의존성 배열에 포함되어 있지 않아 requireAuth 가 변경되면 useEffect가 다시 실행되지 않을 수 있다.

즉 useEffect 안에서 사용된 모든 값(변수, 함수 등)은 의존성 배열에 반드시 포함되어야 한다.

그렇지 않으면 React가 "최신 값으로 재실행할 타이밍"을 놓칠 수 있다.

ESLint에서 강하게 검사하는 이유는 React는 함수형 컴포넌트에서 함수(특히 훅으로 만든 함수)가 렌더링마다 새로 만들어진다고 가정한다.

그래서 만약 useAuth() 훅 내부에서 requireAuth가 매번 새 함수로 생성된다면 useEffect는 그 변화를 감지할 수 없다.

그래서 ESLint는 의존성에 requireAuth를 추가하라고 경고를 나타낸다.

 

---

[해결 방법]

<수정한 코드>

useEffect(() => {
  requireAuth();
}, [isAuthenticated, isLoading, requireAuth]);

 

의존성 배열에서 ESLint를 무시하는 방법도 있다.

하지만 의존성 관리 문제로 디버깅이 어려워질 수 있어 권장하지 않는다.

requireAuth를 useCallback으로 감싸면 매 렌더마다 새로 생성되지 않으므로 경고도 사라진다.

이렇게 하면 requireAuth가 메모이제이션된 함수가 되어 useEffect가 불필요하게 재실행되지 않는다.

// useAuth.ts
import { useCallback } from "react";
import { useRouter } from "next/navigation";
import { useAuthStore } from "../store/auth";

export const useAuth = () => {
  const { user, isAuthenticated, logout } = useAuthStore();
  const router = useRouter();

  const requireAuth = useCallback(() => {
    if (!isAuthenticated) {
      router.push("/login");
      return false;
    }
    return true;
  }, [isAuthenticated, router]);

  const requireGuest = useCallback(() => {
    if (isAuthenticated) {
      router.push("/");
      return false;
    }
    return true;
  }, [isAuthenticated, router]);

  return { user, isAuthenticated, logout, requireAuth, requireGuest };
};

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!☺️

댓글과 좋아요는 큰 힘이 됩니다!