코드스테이츠 프론트엔드 부트캠프 Day 18 - Coz' Mini Hackathon (4) 페이지네이션

밑에 나오는 discussion 목록이 너무 길어서 10개씩 끊는 페이지네이션을 해보려고 한다.

 

간단한 페이지네이션 구현하기

페이지네이션은 생소해서 위 블로그를 참고했다.

 

 

 

HTML에는 맨 밑에

 

<div class="buttons"></div>

 

한 줄만 추가하면 된다.

 

 

 

CSS로 디자인을 한다.

 

/* 페이지네이션 */

.buttons {
    margin-top: 50px;
    position: relative;
    padding: 1rem 0;
    display: inline-flex;
    justify-content: center;
  }
  
  .button {
    padding: 0 1rem;
    font-size: 1.2rem;
    color: #333;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
  }
  
  .button.active,
  .button:hover {
    color: #579BB1;
    font-weight: 600;
    text-decoration: underline;
  }
  
  .prev {
    position: absolute;
    left: -2.5rem;
  }
  
  .next {
    position: absolute;
    right: -2.5rem;
  }
  
  ion-icon {
    padding-top: 0.05rem;
  }

 

ion-icon 은 prev, next 아이콘을 웹에서 불러와서 쓰려고 추가한 것인데, HTML에

 

  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

 

링크를 추가해서 불러왔다.

 

불러온 아이콘 두개

본격적으로 코드를 짜봐야 하는데, 나도 100% 이해하고 따라한 것은 아니다. 내 방식대로 저 블로그의 코드를 해석해서 써보겠다.

 

1.  변수 세팅

 

const contents = document.querySelector("ul.discussions__container");
const buttons = document.querySelector(".buttons");

const numOfContent = agoraStatesDiscussions.length;
const maxContent = 10;
const maxButton = 5;

const maxPage = Math.ceil(agoraStatesDiscussions.length / maxContent);
let page = 1;

contents: 글 목록을 담기 위한 부모 요소

buttons: 페이지 버튼을 담기 위한 버튼들의 부모 요소

numOfContent: 전체 discussion의 개수. 나는 배열 data를 가지고 있으므로, 그 배열의 길이를 numOfContent에 할당했다.

maxContent: 한 페이지에 보여줄 discussion의 개수

maxButton: 한 화면에 보여줄 페이지 버튼의 개수(이건 agoraStatesDiscussions의 element가 많아져서 51개 이상이 될 때 의미가 생긴다. 한 페이지에 10개씩 들어가면 5 페이지에 50개이므로, 51개가 되면 6페이지가 생겨야하고 그러면 기존에 1 2 3 4 5 만 보이던 페이지 버튼을 바꿔줘야 하기 때문이다.)

maxPage: 글을 모두 보여주기 위해 필요한 페이지의 개수

page: 현재 페이지 (시작 페이지 = 1)

 

maxPage 변수에 Math.ceil를 사용한 이유:

전체 discussion 개수를 10으로 나누고 올리면(17.42xxx => 18) 페이지 개수가 나오기 때문

 

2. 버튼 생성 함수 구현

const makeButton = (id) => {
  const button = document.createElement("button");
  button.classList.add("button");
  button.dataset.num = id;
  button.innerText = id;
  button.addEventListener("click", (e) => {
    Array.prototype.forEach.call(buttons.children, (button) => {
      if (button.dataset.num) button.classList.remove("active");
    });
    e.target.classList.add("active");
    renderContent(parseInt(e.target.dataset.num));
  });
  return button;
};

button 이라는 요소를 만들고 "button"이라는 클래스를 추가한다.

 

 

3. 렌더링 함수 구현

 

여기서부터 이해하는 게 어려웠다. 단순히 10개씩 끊어서 페이지에 집어넣는 개념이 아니라,

이 함수를 통과하면서 모든 자식 요소를 지우고 한 페이지에 10개씩 새로 써넣는 개념이다.

 

const renderContent = (page) => {
  while (contents.hasChildNodes()) {
    contents.removeChild(contents.lastChild);
  }
  for (let id = (page - 1) * maxContent + 1; id <= page * maxContent && id <= numOfContent; id++) {
    contents.append(convertToDiscussion(agoraStatesDiscussions[id - 1]))
  }
}

const renderButton = (page) => {
  // 버튼 리스트 초기화
  while (buttons.hasChildNodes()) {
    buttons.removeChild(buttons.lastChild);
  }
  // 화면에 최대 5개의 페이지 버튼 생성
  for (let id = page; id < page + maxButton && id <= maxPage; id++) {
    buttons.appendChild(makeButton(id));
  }
  // 첫 버튼 활성화(class="active")
  buttons.children[0].classList.add("active");
  buttons.prepend(prev);
  buttons.append(next);

  // 이전, 다음 페이지 버튼이 필요한지 체크

  if (page - maxButton < 1) buttons.removeChild(prev);
  if (page + maxButton > maxPage) buttons.removeChild(next);
};

const rndr = (page) => {
  renderContent(page);
  renderButton(page);
};

rndr(page);

 

이해하면서 쳤지만 한꺼번에 보니 뭐라는지 모르겠다. 하나씩 끊어서 천천히 살펴보자.

 

const renderContent = (page) => {
  while (contents.hasChildNodes()) {
    contents.removeChild(contents.lastChild);
  }
  for (let id = (page - 1) * maxContent + 1; id <= page * maxContent && id <= numOfContent; id++) {
    contents.append(convertToDiscussion(agoraStatesDiscussions[id - 1]))
  }
}

 

1. renderContent 라는 함수 표현식을 쓴다. page를 인자로 받는다.

2. 위에서 선언한 contents에 자식노드가 있다면, 마지막 자식부터 지운다. => 그냥 아무것도 없을 때까지 지우겠다는 의미

 

3. for 문을 이해하려면 우선 makeButton 과 renderButton 함수를 다시 들여다봐야 한다. 나는 '도대체 page 값에 변화를 주는 요인이 무엇인가?'에 대해 이틀 밤낮으로 고민했다. 한 번 가보자.

const makeButton = (id) => {
  const button = document.createElement("button");
  button.classList.add("button");
  button.dataset.num = id;
  button.innerText = id;
  button.addEventListener("click", (e) => {
    Array.prototype.forEach.call(buttons.children, (button) => {
      if (button.dataset.num) button.classList.remove("active");
    });
    e.target.classList.add("active");
    renderContent(parseInt(e.target.dataset.num));
  });
  return button;
};


const renderButton = (page) => {
  // 버튼 리스트 초기화
  while (buttons.hasChildNodes()) {
    buttons.removeChild(buttons.lastChild);
  }
  // 화면에 최대 5개의 페이지 버튼 생성
  for (let id = page; id < page + maxButton && id <= maxPage; id++) {
    buttons.appendChild(makeButton(id));
  }
  // 첫 버튼 활성화(class="active")
  buttons.children[0].classList.add("active");
  buttons.prepend(prev);
  buttons.append(next);

  // 이전, 다음 페이지 버튼이 필요한지 체크

  if (page - maxButton < 1) buttons.removeChild(prev);
  if (page + maxButton > maxPage) buttons.removeChild(next);
};

const rndr = (page) => {
  renderContent(page);
  renderButton(page);
};

rndr(page);

 

1. rndr(page) 가 실행되면 page에 1이 할당된 채로 renderButton 함수 실행됨

2. buttons의 모든 자식들 지움(말이 무섭네요)

3. for문을 돌면서 buttons에 makeButton(id)를 append

 

3-1. page가 1이므로 id의 초기값은 1.

3-2. makeButton(1) 실행

3-3. button이라는 요소 만들고 "button"이라는 클래스 붙여줌

3-4. 버튼 안에 1이라는 값을 넣어줌 (화면에 표시되는 것)

3-5. 버튼의 dataset.num 값을 1로 지정

3-5. dataset.num 값이 없는 모든 버튼의 "active" 클래스를 지움

3-6. 타겟(눌린 버튼)에는 "active" 클래스 넣어줌

3-7. renderContent(1) 실행

3-8. 버튼 "1" 이 buttons에 append 됨

 

4. 이 방식으로 버튼이 총 5까지 append 된다. (maxButton이 5 이므로)

5. 그리고 append 된 버튼은 클릭됐을 때 자기 dataset.num을 renderContent에 입력하면서 함수를 실행시킨다.

예를 들어 3번 버튼을 누르면 id의 초기값은 21이고 30까지 증가할 수 있으므로 agoraStateDiscussions의 20번째 인덱스부터 29번째 인덱스까지를 화면에 표시할 수 있는 것이다!!!!!!!!!!!!!

 

 

버튼의 위치 고정을 위해서 discussion__wrapper 의 높이를 고정시키고 스크롤 기능을 추가했다.

아래는 동작 화면이다.