React.useEffect 내에서 상태 업데이트 시 무한 루프 발생 문제

API로부터 데이터를 받아와 상태를 업데이트하고, 해당 상태를 기반으로 다시 필터링 로직을 수행하려 합니다.

코드:

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

export default function DataComponent() {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    setData([1, 2, 3, 4, 5]);
  }, []);

  useEffect(() => {
    const filtered = data.filter(item => item > 2);
    setFilteredData(filtered);
  }, [data]);

  return <div>{filteredData.length}</div>;
}

오류: Error: Maximum update depth exceeded. This can happen when a component repeatedly renders without stopping.

시도: useEffect의 의존성 배열을 빈 배열로 설정하거나, setData 호출 시점을 변경함.

질문: 위 코드 구조에서 data 상태 변경이 어떻게 무한 렌더링을 유발하며, 이를 방지하기 위한 최적의 상태 관리 방법은 무엇입니까?