2관문. Race Condition

관문 2 / 7

빠르게 탭을 전환할 때 이전 응답이 늦게 도착해 화면을 덮어쓰는 버그를 ignore 플래그로 방어하라.

📖 이론 비급

Race Condition: 응답 순서 보장하기

A 요청 후 B 요청을 보냈는데, B가 먼저 완료되고 A가 나중에 오면 마지막에 렌더된 것은 B인데 화면은 A의 데이터를 표시한다.

해결책: let ignore = false; 플래그를 선언하고 cleanup에서 ignore = true로 설정한다. 비동기 완료 시 if (!ignore)를 확인하면 해당 Effect가 폐기됐을 때 업데이트를 건너뛴다.

⚔️ 수련 코드

import { useState, useEffect } from 'react';

async function fetchUser(id) {
  await new Promise(r => setTimeout(r, Math.random() * 2000));
  return { id, name: `User ${id}` };
}

export default function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // TODO: ignore 플래그를 추가하여 Race Condition을 방어하라
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);

  return <p>{user ? user.name : '로딩 중...'}</p>;
}

Open Sandbox