비동기 state 업데이트 후 언마운트

페이지 이동 시 "Can\'t perform a React state update on an unmounted component" 경고가 발생합니다. 버그를 찾으세요:

JSX

function DataLoader() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>로딩중...</p>;
  return <div>{data?.title}</div>;
}

답변

useEffect에서 비동기 요청 완료 전 언마운트되면 state 업데이트 시도로 경고 발생 loading과 data를 하나의 state로 합쳐야 함 fetch와 then 체인을 사용하면 안 됨 setLoading(false)를 setData 앞에 호출해야 함

로그인 후 제출하기