[쇼핑몰 사이트 만들기] #2-2. 더보기 버튼 만들기

더보기 버튼은 버튼을 눌렀을 때 페이지에 떠있는 상품 이외에 더 가져올 수 있는 기능이다.
보통은 인피니티 스크롤 등으로 구현하는 것 같은데 상품을 더 가져오는 기능의 흐름을 파악하기 위해 우선은 버튼으로 구현하고 이후에 인피니티 스크롤로 리팩토링 하는 과정을 거치려한다.
우선은 해보자!✊
구현은 아래와 같은 순서로 진행된다.

목차

1. 더보기 버튼 만들기
2. loadMoreHandler 구현

🔆 1. 더보기 버튼 만들기

해당 버튼을 만들기 위해서는 MongoDB의 사용이 필요하다.
SKIP과 LIMIT를 이용해서 구현을 하는데 요것이 무엇인지 알아보자.

• LIMIT는 처음에 데이터를 가져올 때 한번에 얼마나 데이터를 가져올지 즉, 더보기 버튼을 눌렀을 때 몇개까지 데이터를 가져올 수 있을지에 대한 정보를 정의해준다.
• SKIP은 어디서 부터 데이터를 가져오는 지에 대한 위치를 나타내는데 해당 값은 유동적으로 변한다. SKIP은 처음에 0부터 시작하고, 더보기 버튼을 눌렀을 때 LIMIT 값을 더해주는 식으로 구현해준다. 나 이만큼 불러왔어~ 하는 일종의 화살표 기능이라고 생각하면 더 편하다!! ➡️
  SKIP과 LIMIT는 state로 관리해주자.

src/components/views/LandingPage/LandingPage.js 수정

// ...
function LandingPage() {
  const [Products, setProducts] = useState([]);
  const [Skip, setSkip] = useState(0);
  const [Limit, setLimit] = useState(8);
  const [PostSize, setPostSize] = useState(0);

  useEffect(() => {
    let body = {
      skip: Skip,
      limit: Limit,
    };

    getProducts(body);
  }, []);

  const getProducts = (body) => {
    axios.post("/api/product/products", body).then((response) => {
      if (response.data.success) {
        console.log(response.data);
        if (body.loadMore) {
          setProducts([...Products, ...response.data.productInfo]);
        } else {
          setProducts(response.data.productInfo);
        }
        setPostSize(response.data.postSize);
      } else {
        alert("상품들을 가져오는데 실패 했습니다.");
      }
    });
  };
 
    const loadMoreHandler = () => {
      // ...
  };

  
  //...

  return (
    <div style={{ width: "75%", margin: "3rem auto" }}>
    //...

      {PostSize >= Limit && (
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Button onClick={loadMoreHandler}>더보기</Button>
        </div>
      )}
    </div>
  );
}

export default LandingPage;

나는 limit를 8로 주고 8개씩 더 불러올 수 있도록 구현하였다.
페이지가 가장 처음 로드 될 때 /api/product/products 의 api를 호출되고, 이 때 게시한 글의 수를 PostSize state에 저장해준다. 받아온 게시글 개수에 대한 state을 활용해 버튼은 limit 보다 내가 게시한 글이 더 많을 때만 노출 될 수 있도록 조건을 부여해준다.
클릭되었을 때 loadMore이 true가 되고 true라는 소리는 게시글 수가 limit보다 크다는 의미이니 productInfo의 정보를 Product state에 붙여서 저장해준다. 그렇지 않을 때는 그냥 Product state에 porudctInfo를 저장해준다.
loadMore 등에 대한 것들은 loadMoreHandler에서 구현해주자!

🔁 2. loadMoreHandler 구현

//...
function LandingPage() {

  //...
  const loadMoreHandler = () => {
    let skip = Skip + Limit;
    let body = {
      skip: skip,
      limit: Limit,
      loadMore: true,
    };

    getProducts(body);
    setSkip(skip);
  };
//...
}

export default LandingPage;

클릭될 때 마다 getProducts 함수가 시행되어 api를 불러올 수 있도록 해준다. loadMore을 갱신해서 저는 더보기 버튼 눌러서 호출한 친구예요. 하는 것을 알려주자.
skip 같은 경우는 기존의 Skip과 Limit의 state를 합한 뒤 body에 넘겨주고, Limit 같은 경우는 변하지 않으니 그대로 담아서 body로 넘겨 api를 호출해주자.
이후에 setSkip을 통해 Skip의 state를 skip + Limit 만큼(불러온 만큼) 갱신시켜 가리키는 곳을 변경시켜주자!

➕ 참고

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 를 공부하며 작성한 글입니다.