23.05.18 웹개발_솔로프로젝트(Product list page 만들기)

적어주므로 current를 사용해 bottomRef에 접근했다면 observer.observe를 호출하여 관찰 대상으로 bottomRef.current를 해주는것이다.

위 조건에 맞게 처리가 끝났다면 즉, 언마운트되거나 bottomRef가 변경된다면 더이상의 메모리 누수를 방지하기 위해 componentWillUnmount 메서드가 호출되면서 클린업(정리)함수가 실행된다.
따라서 언마운트 상태에서 bottomRef.current라면 observer.unobserve(bottomRef.current)를 통해 DOM요소의 가시성 변화를 더 이상 감지하지 않게 할 수 있다 즉, IntersectionObserver는 관찰 대상에서 해당 요소를 제거한다.

또한 서버에서 Data를 받아와서 변수에 저장할때 서버의 파라미터가 page로 API요청을 하는데 변수 page를 사용하여 동적으로 페이지의 값을 전달해서 Data를 받아오고 있다.
그렇게 받아온 Data를 상태로 저장하는데 이전의 Data에 누적으로 저장하고 Data를 받아올때마다 서버에 요청할 page에 값을 변경해주기 위해 아래처럼 적어준다

또한 상품을 서버로 부터 받아온 Data가 보여지고 스크롤을 할때 page * 4만큼씩 보여지게 하였다.

setItems((prevItems) => [...prevItems, ...data]);
setPage((prevPage) => prevPage + 1);

<PreviewLi>
 {items.slice(0, page * 4).map((item, index) => 
  <Card key={index} item={item}/>
 )}
</PreviewLi>

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

function Productpage() {
    const [items, setItems] = useState([]);
    const [page, setPage] = useState(1);
    const bottomRef = useRef(null);
  
      
    useEffect(() => {
      loadItems();
    }, []);
  
    useEffect(() => {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          loadItems();
          }
        },
        { threshold: 0.30, rootMargin: '100px' }
      );
  
      if (bottomRef.current) {
        observer.observe(bottomRef.current);
      }
  
      return () => {
        if (bottomRef.current) {
          observer.unobserve(bottomRef.current);
        }
      };
    }, [bottomRef]);
  
    const loadItems = () => {
      fetch('http://cozshopping.codestates-seb.link/api/v1/products?page=' + page)
        .then((response) => response.json())
        .then((data) => {
          setItems((prevItems) => [...prevItems, ...data]);
          setPage((prevPage) => prevPage + 1);
        })
        .catch((error) => {
          console.error(error);
        });
    };

      return(
  			(..중략)

        <PreviewSection>
            <PreviewLi>
                {items.slice(0, page * 4).map((item, index) => 
                 <Card key={index} item={item}/>
                )}
            </PreviewLi>
          </PreviewSection>
          <div ref={bottomRef} />
        </MainContainer>
    )
}

export default Productpage;

오늘은 무한스크롤과 씨름을했다. 많은 시간을 투자한만큼 잘 이해하고 넘어갔으면 좋겠다. 이번 솔로프로젝트때 Modal, Dropdown Tab을 구현했는데 이전에 공부하면서 충분히 복습했다고 생각했는데 막상 다시 구현하려니 많이 잊어먹은것을 인지했다. 남겨둔 기록을 보면서 구현했지만 조금더 익숙해질때까지 연습해야겠다. 그리고 기록을 잘해두는게 도움이 많이 되는거같아서 앞으로 진행될 프로젝트들도 기록을 잘 남겨서 필요할때마다 볼 수 있도록 해야겠다. 이제 조금은 쉬고 여유가 될때 이번 솔로프로젝트의 회고를 적어봐야겠다.