4관문. Primitive Dependencies

관문 4 / 7

객체를 의존성으로 사용할 때 발생하는 무한 실행을 원시값 분해로 해결하라.

📖 이론 비급

Primitive Dependencies: 객체 의존성의 함정

useEffect(() => {...}, [user])에서 user가 객체라면 부모가 렌더할 때마다 새 참조가 생성되어 Effect가 무한 실행될 수 있다.

해결책: 실제로 필요한 원시값을 꺼내어 의존성에 명시하라. useEffect(() => {...}, [user.id, user.name]) 불필요한 Effect 재실행을 원천 차단한다.

⚔️ 수련 코드

import { useState, useEffect } from 'react';

export default function UserTracker({ user }) {
  useEffect(() => {
    // 문제: user 객체 전체를 의존성으로 사용하면
    // 부모 렌더마다 새 참조로 인해 Effect가 재실행된다
    console.log('사용자 변경 추적:', user.id);
    // ... analytics 전송
  }, [user]); // <- 여기를 원시값으로 변경하라

  return <p>추적 중: {user.name}</p>;
}

Open Sandbox