Winnerest 메인 페이지 리팩토링(Observer 무한스크롤)

 

Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer)

 

 

 

observer Intersection 라이브러리를 사용해 구현했던 메인 페이지를 캣보우 프로젝트를 하며 다시 공부한 Observer API 를 사용해 다시 리팩토링했다. 

 

 

const Main = () => {
  const navigate = useNavigate();
  const token = localStorage.getItem('accessToken');
  const [items, setItems] = useState([]);

  const observerRef = useRef(null);
  const page = useRef(0);

  const getItems = async () => {
    page.current += 1;

    const { data } = await axios(
      `${process.env.REACT_APP_BASEURL}/pins?pageSize=10&page=${page.current}`,
      {
        headers: {
          Authorization: token,
        },
      }
    );
    setItems(prevState => [...data.data, ...prevState]);
  };

  useEffect(() => {
    if (!token) {
      alert('로그인이 필요한 서비스입니다!');
      navigate('/auth/signIn');
    }
    if (token) {
      const options = {
        root: null,
        rootMargin: '0px 10px 10px 10px',
        threshold: 1,
      };

      const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            console.log(entry.isIntersecting, 'data 가져오는 중');
            getItems();
          }
        });
      }, options);
      observer.observe(observerRef.current);
      console.log('옵저버 연결');
      return () => {
        console.log('옵저버 해제');
        observer.disconnect();
      };
    }
  }, [items]);
  console.log('get완료');

  return (
    <div style={{ background: 'beige' }}>
      <MainLayout>
        <MainStyle>
          {items.map((item, id) => {
            return <PinForMain key={id} {...item} />;
          })}
        </MainStyle>
        <div style={{ height: '20px', background: 'red' }} ref={observerRef} />
      </MainLayout>
    </div>
  );
};

 

 

 

👇 observer API 

Intersection Observer API - Web API | MDN

 

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

 

 

option 에 들어가는 것은 viewPort 설정이다.

적지 않을시 기본값으로 설정된다.

 

new intersectionObserver는 인자로 콜백과 option을 받는데 viewport와 관찰자가 만나게 된다면 안의 속성 중 intersecting이 true 로 바뀌게 된다.

 

이 점을 이용하여 무한 스크롤을 만들 수 있는데 True 일 경우 GetItem()함수가 작동되도록 로직을 짰다

한번 데이터를 불러서 로직이 끝나면 연결된 옵저버를 끊어줘야 한번만 받아오기 때문에 익명함수를 만들어 observer.disconnect()로 연결을 끊어주었다.