useEffect 무한 루프

컴포넌트가 마운트되면 API 호출이 무한 반복됩니다. 버그를 찾으세요:

JSX

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  });

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

답변

setUsers가 비동기 함수 안에서 작동하지 않음 fetch 함수가 React에서 지원되지 않음 useEffect 안에서 state를 변경할 수 없음 useEffect에 의존성 배열이 없어서 매 렌더링마다 실행됨

로그인 후 제출하기