useEffect 의존성 배열 누락

props로 받은 userId가 변경되어도 데이터를 다시 가져오지 않습니다. 버그를 찾으세요:

JSX

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

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  if (!user) return <p>로딩중...</p>;
  return <h1>{user.name}</h1>;
}

답변

fetch URL에 템플릿 리터럴을 사용하면 안 됨 setUser에 json 데이터를 직접 전달하면 안 됨 null 체크 후 early return하면 Hook 규칙 위반 useEffect 의존성 배열에 userId가 없어서 props 변경을 감지하지 못함

로그인 후 제출하기