무한 스크롤을 구현해볼려고 하는데

export default function Home() {
  const [dbData, setData] = useState([]);
  const [dbDataSlice, setDbDataSlice] = useState([]);
  const [loading, setLoading] = useState(false);
  const [target, setTarget] = useState("");
  const [num, setNum] = useState(4);

  useEffect(() => {
    dbService
      .collection("board")
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          setData((prev) => [doc.data(), ...prev]);
        });
      });
  }, []);                             // 파이어베이스에 있는 데이터들을 전부 가져옴

  useEffect(() => {
    setDbDataSlice(dbData.slice(0, 16));
  }, [dbData]);               // 파이어베이스에서 데이터를 가져오면 16개를 잘라서 

                                            DbDataSlice 스테이트에 넣음 

                                             맨처음 들어오면 보여줄 이미지들.

  const onIntersect = async ([entry], observer) => {
    if (entry.isIntersecting) {
      observer.unobserve(entry.target);
      setLoading(true);
      setDbDataSlice((prev) => [...prev, dbData.slice(4 * num, 4 * (num + 1))]);
      setLoading(false);
      setNum(num + 1);
      observer.observe(entry.target);
    }
  };

//아까 맨 처음 보여 줄 이미지가 16개까지 잘랐기 때문에 

setDbDataSlice((prev) => [...prev, dbData.slice(4 * num, 4 * (num + 1))]); 이 코드를 넣었고, num의 기본 값은 4 이고, 함수가 실행되면 num + 1 을 해줌

  useEffect(() => {
    let observer;
    if (target) {
      observer = new IntersectionObserver(onIntersect, {
        threshold: 0.4,
      });
      observer.observe(target);
    }
    return () => observer && observer.disconnect();
  }, [target]);

  console.log(dbDataSlice);
  return (
    <div className='container'>
      <div>
        {dbDataSlice.map((a, i) => (
          <이미지 src = {dbDateSlice[i].img} />
        ))}
      </div>

      {loading ? (
        <div className='rnlcks'>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
          <div className='img'></div>
        </div>
      ) : (
        <div ref={setTarget}>
          <p>이거 절대 못봄ㅋㅋㅋㅋ 보면 만원드림 ㅋㅋㄹㅃㅃ</p>
        </div>
      )}
      <style jsx>{`
        .container {
          width: 1080px;
          margin: 0 auto;
        }
        img {
          width: 260px;
          height: 260px;
          object-fit: cover;
        }
        .rnlcks {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
        }
        .img {
          width: 260px;
          height: 260px;
          background: gray;
        }
      `}</style>
    </div>
  );
}

4일째 혼자서 이것저것 해봤는데 좀 있으면 파이어베이스 무료.. 읽기가 초과되서

질문을 남겼습니다 처음에 useEffect로 setDbDataSlice 에 값 넣는건 되는데

onIntersect 함수 안에 setDbDataSlice도 안되고.. 제가 하는 방법이 맞는지 잘 모르겠어염