컴포넌트 생명주기 — 마운트에서 언마운트까지 무슨 일이 벌어지나

function UserProfile({ userId }) {
  // 1. useState 초기화 — 최초 렌더 시에만 초기값 사용
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // 2. 렌더링 — JSX 반환, DOM에 반영

  // 3. useEffect 실행 — DOM이 그려진 후
  useEffect(() => {
    console.log('마운트: 데이터를 가져옵니다');
    fetchUser(userId).then(data => {
      setUser(data);
      setLoading(false);
    });
  }, [userId]);

  return loading ? <Spinner /> : <div>{user.name}</div>;
}

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`count가 ${count}로 변경되었습니다`);
    document.title = `클릭 ${count}회`;

    return () => {
      console.log(`cleanup: 이전 count ${count}에 대한 정리`);
    };
  }, [count]);

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    console.log(`${roomId} 채팅방에 연결했습니다`);

    // cleanup: 언마운트 시 또는 roomId 변경 시 실행
    return () => {
      connection.disconnect();
      console.log(`${roomId} 채팅방에서 연결 해제했습니다`);
    };
  }, [roomId]);

  return <div>채팅방: {roomId}</div>;
}

// ❌ 이렇게 생각하지 마세요
// "마운트 시 데이터를 가져오고, userId가 바뀌면 다시 가져온다"

// ✅ 이렇게 생각하세요
// "이 effect는 userId와 동기화된다"
useEffect(() => {
  const controller = new AbortController();

  fetchUser(userId, { signal: controller.signal })
    .then(setUser);

  return () => controller.abort();
}, [userId]); // userId가 변하면 다시 동기화

function Tooltip({ anchorRef, children }) {
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const tooltipRef = useRef(null);

  // DOM 측정은 paint 전에 해야 깜빡임이 없습니다
  useLayoutEffect(() => {
    const anchorRect = anchorRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    setPosition({
      top: anchorRect.top - tooltipRect.height - 8,
      left: anchorRect.left + (anchorRect.width - tooltipRect.width) / 2,
    });
  }, [anchorRef]);

  return (
    <div ref={tooltipRef} style={{ position: 'fixed', ...position }}>
      {children}
    </div>
  );
}

// 개발 환경에서의 실행 순서
// 1. 마운트 → effect 실행
// 2. 언마운트 시뮬레이션 → cleanup 실행
// 3. 재마운트 → effect 다시 실행

// ❌ cleanup이 없으면 StrictMode에서 이중 구독
useEffect(() => {
  const handler = () => console.log('resize');
  window.addEventListener('resize', handler);
  // cleanup이 없다!
}, []);

// ✅ cleanup을 항상 작성
useEffect(() => {
  const handler = () => console.log('resize');
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler);
}, []);

// ❌ cleanup 누락 — 메모리 누수 발생
useEffect(() => {
  const ws = new WebSocket('ws://api.example.com');
  ws.onmessage = (msg) => setData(JSON.parse(msg.data));
}, []);

// ✅ cleanup으로 연결 해제
useEffect(() => {
  const ws = new WebSocket('ws://api.example.com');
  ws.onmessage = (msg) => setData(JSON.parse(msg.data));
  return () => ws.close();
}, []);

// ❌ 무한 루프
const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1); // count가 바뀌면 effect 재실행 → 무한
}, [count]);