Effect 경쟁 조건 — 오래된 응답이 나중에 도착할 때

지난 글에서 Effect가 필요 없는 상황들을 살펴봤다. 이번에는 Effect가 실제로 필요한 가장 흔한 경우인 데이터 페칭에서 발생하는 경쟁 조건(race condition)을 다룬다. 빠르게 클릭하거나 값이 빠르게 바뀌는 환경에서 반드시 마주치는 문제다.

경쟁 조건이란

같은 Effect가 여러 번 실행될 때, 먼저 시작한 요청이 나중에 완료되면 오래된 데이터로 화면이 덮어씌워지는 문제다.

// 문제가 있는 코드
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data); // userId가 바뀐 후 이전 응답이 도착하면?
    });
  }, [userId]);
}

userId가 1 → 2로 빠르게 바뀌면:

1. userId=1 요청 시작
2. userId=2 요청 시작
3. userId=2 응답 도착 → setUser(user2) 화면에 userId=2 표시
4. userId=1 응답이 늦게 도착 → setUser(user1) 화면에 userId=1 데이터 덮어씀

userId=2를 보고 있는데 userId=1의 데이터가 표시된다.

해결책 1: ignore 플래그 패턴

가장 범용적인 해결책이다. cleanup 함수에서 ignore = true로 바꿔 이전 Effect의 콜백을 무력화한다.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    let ignore = false; // 이 Effect 실행 인스턴스의 플래그
    setIsLoading(true);

    fetchUser(userId)
      .then(data => {
        if (!ignore) { // cleanup이 실행됐다면 무시
          setUser(data);
          setIsLoading(false);
        }
      })
      .catch(err => {
        if (!ignore) {
          setError(err.message);
          setIsLoading(false);
        }
      });

    return () => {
      ignore = true; // userId 바뀌면 이 플래그를 true로
    };
  }, [userId]);

  if (isLoading) return <Spinner />;
  return <Profile user={user} />;
}

ignore는 각 Effect 실행마다 새로 만들어지는 로컬 변수다. cleanup이 실행되면(userId가 바뀌면) 해당 실행의 ignore가 true로 바뀌어, 이미 시작된 fetch가 완료되어도 setUser를 호출하지 않는다.

해결책 2: AbortController

AbortController를 써서 이전 요청 자체를 취소할 수 있다.

useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/user/${userId}`, {
    signal: controller.signal
  })
    .then(res => {
      if (!res.ok) throw new Error('요청 실패');
      return res.json();
    })
    .then(data => setUser(data))
    .catch(err => {
      if (err.name === 'AbortError') return; // 취소는 에러 아님
      setError(err.message);
    });

  return () => controller.abort(); // cleanup: 이전 요청 취소
}, [userId]);

AbortController는 브라우저의 fetch API와 직접 연동된다. cleanup에서 controller.abort()를 호출하면 진행 중인 네트워크 요청 자체가 취소되고, promise가 AbortError로 reject된다.

ignore 패턴 vs AbortController:

• ignore: 구현 간단, 어떤 비동기 함수에도 사용 가능, 요청은 계속 진행됨 (응답만 무시)
• AbortController: 네트워크 요청 자체를 취소해 불필요한 대역폭 절약, fetch 전용

로딩, 에러, 성공 상태 올바르게 관리

경쟁 조건을 막으면서 로딩/에러/성공 상태를 함께 관리하는 완성된 패턴이다.

function useUser(userId) {
  const [state, setState] = useState({
    data: null,
    isLoading: true,
    error: null,
  });

  useEffect(() => {
    if (!userId) return; // userId 없으면 실행 안 함

    let ignore = false;
    setState({ data: null, isLoading: true, error: null });

    fetchUser(userId)
      .then(data => {
        if (!ignore) setState({ data, isLoading: false, error: null });
      })
      .catch(err => {
        if (!ignore) setState({ data: null, isLoading: false, error: err.message });
      });

    return () => { ignore = true; };
  }, [userId]);

  return state;
}

setState를 한 번에 객체로 업데이트해서 로딩 시작 시 data와 error를 동시에 초기화한다. 이렇게 하면 이전 사용자의 데이터가 새 사용자 로딩 중에 잠깐 보이는 문제를 방지한다.

빠른 입력과 디바운스

검색어처럼 빠르게 바뀌는 값에 fetch를 연결할 때는 디바운스와 함께 쓰는 것이 좋다.

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }

    let ignore = false;
    const timerId = setTimeout(() => {
      // 300ms 후에야 fetch 시작 (디바운스)
      fetchSearch(query).then(data => {
        if (!ignore) setResults(data);
      });
    }, 300);

    return () => {
      clearTimeout(timerId); // 타이머 취소 (cleanup)
      ignore = true;          // 이미 시작된 fetch 무시
    };
  }, [query]);

  return <ul>{results.map(r => <li key={r.id}>{r.name}</li>)}</ul>;
}

cleanup에서 타이머와 ignore 플래그를 함께 처리한다. query가 빠르게 바뀌면 타이머가 계속 취소/재생성되어 마지막 입력 후 300ms 뒤에만 요청이 나간다.

---

지난 글: Effect가 필요 없는 상황들

다음 글: AbortController로 fetch 요청 취소하기

읽어주셔서 감사합니다. 😊