[JS] 페이징 - 더보기 버튼

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌

 

 

더 보기 버튼은 기존 페이지에 새로운 페이지를 '추가'하는 방식이다.

실습을 위해 사용한 API는 데이터 요청 시 한 번에 10개씩 반환해 준다. 이때 API에서 page라는 key값을 제공해 주기 때문에 이를 활용하여 더 보기 버튼 기능 구현이 가능하다. 

 

더 보기 버튼 클릭 시 서버에 키워드를 요청하는 통신 로직을 가지고 있는 searchMovies 함수에 동적으로 원하는 page의 value값을 전달해줘야 한다.

 this.el.addEventListener("click", async () => {
    // 버튼 클릭시 API 통신하는 store 함수 활용
    await searchMovies(movieStore.state.page + 1);
  });

 

searchMovies 함수에서 받아온 매개변수 값을 요청 쿼리에 넣어주고, 응답받은 값의 속성 중 하나인 totalResults의 값을 통해 영화 목록 리스트의 페이지 개수를 알아낼 수 있다. totalResults 속성은 키워드와 일치하는 결과의 총개수인데, 한 번에 10페이지씩 값이 반환되니 총개수를 10으로 나누고 올림처리를 해주면 된다. 이때 반환값이 string이므로 number로 꼭 바꿔주자!

 store.state.pageMax = Math.ceil(Number(totalResults) / 10);

 

그리고 받아올 수 있는 페이지 개수를 담은 pageMax값과 현재 보이고 있는 페이지 수를 담은 page를 비교하여 더 이상 보여줄 페이지가 없다면 더 보기 버튼을 숨김처리 하도록 CSS를 제어해 준다.

export default class MovieLIstMore extends Component {
  constructor() {
    super({
      tagName: "button",
    });
    movieStore.subscribe("pageMax", () => {
      const { page, pageMax } = movieStore.state;
      pageMax > page
        ? this.el.classList.remove("hide")
        : this.el.classList.add("hide");
    });
  }
  render() {
	  // ...
	}
}

.view-more {
  width: 100%;
  max-width: 300px;
  margin: 20px auto;
  display: block;
}

.view-more.hide {
  display: none;
}

 

---

참고

[패스트캠퍼스 인강] 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online - API를 활용한 영화 검색 사이트(링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!