무한스크롤 리트라이 2일차

무한스크롤 리트라이 2일차

observer가 target을 관측하기 전에 초기화 되어 있어야 함.
target이 실제로 렌더링 된 후에 observer가 관측해야 함.

-> 현재 상황: 초기렌더링에서는 여전히 작동 안함.
초기 렌더링에서 target이 null로 잡히는 문제를 확인하고

const target = useRef<HTMLDivElement | null>(document.createElement('div'));

로 초기값을 변경해주었으나 여전히 초기렌더링에서는 관측 작동 안함.

위에서 작성한 코드와 실제로 설정해놓은 타겟이 같은 것을 가리키지 않음을 확인함.

useEffect(() => {
    console.log(target.current);

    if(target.current){
      observer.observe(target.current);
    }
  }, [target.current]);

위와 같이 target이 시간이 지나야 값이 생기는 것을 확인하고 target.current값이 변경될 때 렌더링 되도록 의존성 배열을 설정함. 실제 코드로 초기렌더링에서 작동을 하나, cooperation만 작동을 하고 recruitment는 작동 안 하는 것을 확인. 그리고 모든 데이터를 불러오고 나서 division을 바꾸면 데이터를 불러오지 못하는 오류 확인.

division이 바뀔 때 page 상태도 초기화할 필요가 있음.

useEffect(() => {
    setPage(1);
  }, [division]);

-> 페이지와 8개 미만인지 상태 초기화가 안되는 것으로 보여짐.
-> 초기화는 되는데 초기화가 되기 전에 get 요청을 보내버림.