6관문. useIsMounted

관문 6 / 7

언마운트된 컴포넌트에서 setState를 호출하는 메모리 누수 경고를 useIsMounted로 방어하라.

📖 이론 비급

useIsMounted: 안전한 비동기 상태 업데이트

컴포넌트가 언마운트된 후 비동기 작업이 완료되어 setState를 호출하면 "Can't perform a React state update on unmounted component" 경고가 발생한다.

패턴: const isMounted = useRef(false); 마운트 시 isMounted.current = true, cleanup에서 false로 설정. 비동기 완료 시 if (isMounted.current) setState(...)로 체크한다.

⚔️ 수련 코드

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

// TODO: useIsMounted 훅을 구현하라
// 마운트 중이면 true, 언마운트 후면 false를 반환하는 ref를 반환
function useIsMounted() {
}

export default function AsyncComponent({ id }) {
  const [data, setData] = useState(null);
  const isMounted = useIsMounted();

  useEffect(() => {
    setTimeout(() => {
      // TODO: isMounted를 체크한 후 setData를 호출하라
      setData(`데이터 ${id}`);
    }, 2000);
  }, [id]);

  return <p>{data ?? '로딩 중...'}</p>;
}

Open Sandbox