🔄 useEffect의 과도한 남용: 의도치 않은 재실행과 복잡한 의존성 관리

Why Wrong?

How to Fix?

import React, { useState, useEffect } from 'react';

function UserProfile({ userId, profileType }) {
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  // ❌ 안티패턴: profileType은 API 호출에 직접적인 영향을 주지 않지만 의존성 배열에 포함되어
  // profileType이 변경될 때마다 불필요하게 데이터 재요청이 발생할 수 있음.
  // 또한, 명시적인 '새로고침' 기능을 구현하기 어려움.
  useEffect(() => {
    if (!userId) return;

    const fetchUserData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        // profileType이 실제로는 API 쿼리에 사용되지 않거나, UI 표시용이라면 이 요청은 불필요
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
          throw new Error('Failed to fetch user data');
        }
        const data = await response.json();
        setUserData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserData();
  }, [userId, profileType]); // profileType이 변경될 때마다 불필요한 재실행 발생 가능

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생: {error}</div>;
  if (!userData) return <div>사용자 정보를 불러올 수 없습니다.</div>;

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>이메일: {userData.email}</p>
      <p>프로필 타입: {profileType}</p> {/* profileType은 단순히 UI 표시용으로 가정 */}
      <button onClick={() => console.log('새로고침 기능 추가 필요')}>데이터 새로고침 (미구현)</button>
    </div>
  );
}

export default UserProfile;

import React, { useState, useEffect, useCallback } from 'react';

function UserProfile({ userId, profileType }) {
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  // ✅ 개선: 데이터 패칭 로직을 별도의 함수로 분리하고 useCallback으로 래핑하여 함수 참조 안정성 확보
  // userId 외 다른 prop/state는 API 호출에 직접 영향을 주지 않는다면 의존성에서 제외
  const fetchDataById = useCallback(async (id) => {
    if (!id) {
      setUserData(null);
      return;
    }

    setIsLoading(true);
    setError(null);

    // AbortController를 사용하여 컴포넌트 언마운트 시 요청 취소 (메모리 누수 및 경쟁 조건 방지)
    const controller = new AbortController();
    const signal = controller.signal;

    try {
      const response = await fetch(`/api/users/${id}`, { signal });
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      const data = await response.json();
      setUserData(data);
    } catch (err) {
      if (err.name === 'AbortError') {
        console.log('Fetch aborted');
      } else {
        setError(err.message);
      }
    } finally {
      setIsLoading(false);
    }
    return controller; // cleanup을 위해 controller 반환
  }, []); // 이 함수는 외부 스코프의 상태에 의존하지 않으므로 빈 배열 (userId는 인자로 받음)

  // ✅ 개선: useEffect는 이제 userId가 변경될 때만 데이터를 로드하고, 클린업 함수를 제공
  useEffect(() => {
    const controller = fetchDataById(userId);
    return () => {
      // 컴포넌트 언마운트 또는 userId 변경 시 이전 요청 취소
      if (controller) controller.abort();
    };
  }, [userId, fetchDataById]); // fetchDataById는 useCallback으로 안정적이므로 userId 변경 시에만 실행

  // ✅ 개선: 사용자가 명시적으로 데이터를 다시 로드하고 싶을 때 호출할 함수 (이벤트 핸들러)
  const handleRefreshClick = () => {
    fetchDataById(userId);
  };

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생: {error}</div>;
  if (!userData) return <div>사용자 정보를 불러올 수 없습니다.</div>;

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>이메일: {userData.email}</p>
      <p>프로필 타입: {profileType}</p> {/* profileType은 UI 표시용으로만 사용 */}
      <button onClick={handleRefreshClick} disabled={isLoading}>데이터 새로고침</button>
    </div>
  );
}

export default UserProfile;

You Might Also Like