🔥 Trouble Shooting - Tanstack Query와 useEffect의 무한 루프 함정

🚨 문제 상황

상품 등록/수정 페이지에서 기존 상품 정보를 불러올 때, 아무런 로직을 하지않아도 alert 경고 문구가 계속 뜨고 무한 루프가 발생했다. 상품 정보를 불러온 후 폼에 채우는 간단한 작업인데 계속해서 API 호출이 반복되며 alert가 끊임없이 생성되었다...

💻 문제 발생 코드

const navigate = useNavigate();
const [searchParams] = useSearchParams();
const productId = searchParams.get('productId');

const { data: productData, error: productError } = useProductDetail(productId);

useEffect(() => {
  if (productId && productData) {
    handleProductChange(productData);
  }
  if (productError) {
    alert('수정하실 상품 정보를 불러오는데 실패했습니다.');
  }
}, [productData, productError]);

const {
  product,
  error,
  handleImageChange,
  handleProductChange,
  handleSubmit,
} = useProductRegistration(onSuccess, productId);

🤔 원인 분석

1. 의존성 배열 문제: useEffect 내에서 handleProductChange(productData)를 호출하면 product 상태가 변경되고 컴포넌트가 리렌더링된다.

✅ 해결 방법

1. 의존성 배열 수정 (실패)

useEffect(() => {
  if (productId && productData) {
    handleProductChange(productData);
  }
  if (productError) {
    alert('수정하실 상품 정보를 불러오는데 실패했습니다.');
  }
}, [productId, productData, productError]);

2. 최초 로드 시에만 실행하도록 조건 추가 (실패)

useEffect(() => {
  if (productId && productData && !product.name) {
    handleProductChange(productData);
  }
  if (productError) {
    alert('수정하실 상품 정보를 불러오는데 실패했습니다.');
  }
}, [productId, productData, productError, product.name]);

3. Tanstack Query의 enabled 옵션 활용 (최종 해결책)

export const useProductDetail = (productId) => {
  return useQuery({
    queryKey: [QUERY_KEYS.PRODUCT.DETAIL, productId],
    queryFn: async () => {
      if (!productId) return null;
      
      const { data, error } = await supabase
        .from('products')
        .select('*')
        .eq('id', productId)
        .single();
        
      if (error) throw error;
      return data;
    },
    // 기본적으로 productId가 있을 때만 실행
    enabled: !!productId
  });
};

4. 단순화된 useEffect 구현 (백업 솔루션)

useEffect(() => {
  if (productData) {
    handleProductChange(productData);
  }

  if (productError) {
    alert('상품 정보를 불러오는 데 실패했습니다.');
    console.error(productError);
  }
}, [productData, productError]);

🎯 해결 포인트

1. useQuery의 enabled 옵션 활용: 조건부 쿼리 실행으로 무한 루프 방지
2. 상태 업데이트 조건 설정: 이미 데이터가 로드된 경우 중복 업데이트 방지
3. 의존성 배열 최적화: 필요한 의존성만 포함하여 불필요한 재실행 방지

📝 배운 점

1. Tanstack Query의 enabled 옵션은 조건부 데이터 로딩에 매우 유용하다.
2. useEffect의 의존성 배열에는 내부에서 사용하는 변수를 포함해야 한다.
3. 상태 업데이트 함수가 불필요하게 여러 번 호출되지 않도록 조건을 설정하는 것이 중요하다.
4. Tanstack Query와 useEffect를 함께 사용할 때는 데이터 흐름을 신중하게 설계해야 한다.

🔄 개선된 점

1. 불필요한 API 호출 최소화로 성능 향상
2. 무한 루프 제거로 사용자 경험 개선
3. 코드의 예측 가능성 향상

💡 추가 TIP

1. React Query의 enabled 조건에서 주의할 점:

   // 이렇게 하면 오류 발생!
   enabled: !!productId && !productData.name

   productData가 초기에 undefined일 때 .name에 접근하면 오류가 발생한다.

2. onSuccess 콜백 활용:

   const { data } = useQuery('products', fetchProducts, {
     onSuccess: (data) => {
       // 데이터 로드 성공 시 한 번만 실행
       handleDataLoaded(data);
     }
   });

3. 의존성 배열에 객체 프로퍼티 대신 객체 자체를 사용:

   // 이렇게 하는 것보다
   }, [product.name]);
   
   // 이렇게 하는 것이 더 안전할 수 있음
   }, [product]);

   하지만 불필요한 렌더링이 발생할 수 있으므로 상황에 맞게 사용해야 한다.

+) 추가로 헷갈렸던 점!

useEffect(() => {
  if (!sendAddress) return;
  const searchAddress = async (address) => {
    try {
      const coords = await addressToCoords(address);
      // ...나머지 코드
    } catch (error) {
      // ...에러 처리
    }
  };
  searchAddress(sendAddress);
}, [sendAddress, addressToCoords, coordsToAddress, onLocationSelect]);

이 코드를 작성하다 문득 헷갈렸다. 함수를 의존성 배열에 추가하는 것이 옳은 방향이였을까?
카카오 맵에서 사용자가 선택할때마다 값을 변형(경도 위도 <-> 주소명)하여 보여줘야하는 로직이기에 함수를 의존성 배열로 추가한건데.. 과연 옳았을까?

우선.

---

🌟 useEffect 의존성 배열에 함수가 들어간다는것은 어떤의미일까?

함수를 useEffect의 의존성 배열에 포함시켜야 하는 이유는 자바스크립트에서 함수가 일급 객체(First-class Object)이기 때문이다. 이는 다음과 같은 의미를 갖는다:

✨ 1. 함수도 객체다.

함수는 숫자, 문자열, 객체, 배열처럼 값으로 취급된다.

✨ 2. 함수 참조는 렌더링마다 달라질 수 있다.

컴포넌트가 리렌더링될 때마다 함수는 새롭게 생성되어 새로운 메모리 참조를 갖게 된다

✨ 3. 클로저와 상태 참조

함수 내부에서 참조하는 상태나 props가 변경되면 함수의 동작도 변경 될 수 있다.
함수 선언은 변수 선언과 비슷하게 작동한다. 컴포넌트가 렌더링될 때마다:

1. 새로운 함수 객체가 생성
2. 이 새 함수는 새로운 메모리 주소에 저장
3. 따라서 이전 렌더링의 함수와 현재 렌더링의 함수는 서로 다른 객체
   (updateData !== previousUpdateData)

function Component() {
  const [count, setCount] = useState(0);
  
  // 이 함수는 매 렌더링마다 새로 생성됨
  const updateData = () => {
    // count 값에 따라 동작이 달라짐
    fetchData(count);
  };
  
  useEffect(() => {
    updateData();
  }, [updateData]); // updateData가 변경될 때마다 effect 실행
}

이 문제를 해결하기 위해 useCallback을 사용하면 함수 참조의 안정성을 확보할 수 있게 된다.

function Component() {
  const [count, setCount] = useState(0);
  
  // count가 변경될 때만 새로운 함수 생성
  const updateData = useCallback(() => {
    fetchData(count);
  }, [count]);
  
  useEffect(() => {
    updateData();
  }, [updateData]);
}

따라서 useEffect 의존성 배열에 함수를 포함시키는 것은 함수의 참조나 내부 로직이 변경될때 effect를 재실행하도록 하게하는 메커니즘인것이다.

---

useEffect(() => {
  if (!sendAddress) return;
  const searchAddress = async (address) => {
    try {
      const coords = await addressToCoords(address);
      // ...나머지 코드
    } catch (error) {
      // ...에러 처리
    }
  };
  searchAddress(sendAddress);
}, [sendAddress, addressToCoords, coordsToAddress, onLocationSelect]);

다시 돌아와서 그럼 먼저 코드의 목적을 정리해보면

1. sendAddress 값이 변경될 때마다
2. 해당 주소를 좌표로 변환하고 (addressToCoords)
3. 필요하면 지도 상태를 업데이트하고 (setLocation, setCenter)
4. 좌표를 다시 상세 주소로 변환한 후 (coordsToAddress)
5. 결과를 콜백으로 전달 (onLocationSelect)

결론: 의존성 배열에 함수들을 포함시킨 것은 올바른 접근이였다. 그 이유는?

addressToCoords와 coordsToAddress는 지오코딩 기능을 수행하는 함수로, 내부 로직이나 참조가 변경될 가능성이 있음
onLocationSelect는 선택한 위치 정보를 부모 컴포넌트에 전달하는 콜백 함수로, 부모 컴포넌트가 리렌더링되면 새 함수 참조가 전달될 수 있기에..