자바스크립트로 pagination 구현하기(+리액트)

코드스테이츠 4주차 솔로프로젝트, 8주차 솔로프로젝트 과제입니다. 혹 검색해서 찾아오시는 분들에게 도움이되고자 코드스테이츠란 말을 남깁니다

 

 

 

https://animated-puppy-360e0b.netlify.app/

-자바스크립트로 구현한 사이트

https://sweesweett.github.io/fe-sprint-my-agora-states-server/

-리액트로 구현한 사이트(다만 리액트는 서버(localhost:3001)가 켜져있어야 가능 어차피 똑같이생김)

pagination을 구현한 모습!

처음으로 pagination을 구현해봤다. localstorage를 이용하는 방법이라 실제 백엔드와 통신할때는 다를것이라 예상한다

또한 나의 실력도 초보자이기 때문에..ㅎ...ㅎ.ㅎ.ㅎ... 깔끔하지 못한 것 같다

<< >> 는 맨 처음으로, 맨 끝으로/ <> 는 3단위로 넘어가지는데, 보이는 번호중 가장 첫번째 번호의 페이지를 보여줌

단계별로 구상을 했었는데

1. 로딩이 되면 번호 나타내기=>즉시실행함수

2. 번호 클릭했을 때 이벤트 함수 실행

• 우선 기존의 번호들을 삭제 후, 다음페이지들을 보여주는 번호들을 만든다
• 번호들을 만든 후 해당페이지(즉 456이면 4페이지)에 해당하는 버튼에 색을 넣는다
• 색을 넣고 기존에 화면에 떠있는 li들을 지우고  해당 페이지에 해당하는 li를 보여준다

여기서 render2 함수는 페이지를 렌더링 하는 함수! 

// 총 페이지번호 갯수(41개면 5개)->localstorage안에 저장되어있는 배열을 사용
(function getPagination() {
  let getNum = 0;
  const length = JSON.parse(localStorage.getItem('newArr')).length;// 로컬스토리지에서 불러오기
  let pagination = document.querySelector('.pagination');
  if (length > 10) {// 만약 길이가 10보다 크면
    if (length % 10) {
      getNum = parseInt(length / 10) + 1// 10으로 나눈 몫 +1
    } else {
      getNum = length / 10;
    }
  } else {
    getNum = 1;
  }
//함수 안의 함수! 페이지 번호 만들 때 (생성하려는 요소, 그 요소의 부모, 클래스이름, 시작번호, 끝나는 번호)
  function createPage(createEl, Elparent, clName, startNum, endNum) {
    for (let i = startNum; i <= endNum; i++) {
      if (getNum < i) {// getNum=> 아까 
        return;
      }
      const page = document.createElement(createEl);
      page.className = clName;
      page.textContent = i;
      document.querySelector(`.${Elparent}`).append(page);
    }
  }

  createPage('span', 'pagination', 'page', 1, 3);
  pagination.firstChild.classList.add('colored');//클래스 이름 추가(해당 번호 색 넣기 위해)

  if (getNum > 3) {
    // 맨 앞, 맨 뒤로가기 버튼
    document.querySelector('#goToOne').onclick = function () {//맨앞
      let num = Number(pagination.firstChild.textContent);
      hadchildren(pagination);// 기존의 번호들 삭제
      createPage('span', 'pagination', 'page', 1, 3);//새로 생성
      pagination.firstChild.classList.add('colored');//해당 번호들의 첫 번호에 class추가
      hadchildren(ul);//ul의 자식들 삭제
      render2(ul, 0, 9);// 렌더링
      window.scrollTo(0, 0);// 화면 맨 위 보여주기 
    };
    document.querySelector('#goToLast').onclick = function () {//맨 뒤
      let num = getNum % 3;//아까 총 페이지 번호 갯수%3(3단위로 나눌거니까)
      hadchildren(pagination);
      if (num === 0) {
        createPage('span', 'pagination', 'page', getNum - 2, getNum);
      } else {//3으로 딱 나누어 지지 않을 때 마지막에 보여주는 페이지 번호를 고려
        createPage('span', 'pagination', 'page', getNum - num + 1, getNum);
      }
      if (document.querySelector('.colored') !== null) {// 만약 색칠된게 null이 아닐때
        document.querySelector('.colored').classList.remove('colored');//클래스 삭제
      }
      pagination.lastChild.classList.add('colored');// 맨뒤의 자식에 클래스추가
      hadchildren(ul);
      render2(ul, (getNum - 1) * 10, getNum * 10 - 1);
      window.scrollTo(0, 0);
    };
    
    
    
    //3단위로 이동
	document.querySelector('#nextBtn').onclick = function () {
      let num = Number(pagination.lastChild.textContent);
      if (num === getNum) { //lastChild의 번호가 getNum이면 작동 x
        return;
      }
      hadchildren(pagination);
      createPage('span', 'pagination', 'page', num + 1, num + 3);
      if (document.querySelector('.colored') !== null) {
        document.querySelector('.colored').classList.remove('colored');
      }
      pagination.firstChild.classList.add('colored');
      hadchildren(ul);
      render2(ul, num * 10, (num + 1) * 10 - 1);
      window.scrollTo(0, 0);
    };
    document.querySelector('#beforeBtn').onclick = function () {
      let num = Number(pagination.firstChild.textContent);
      if (num === 1) {
        return;
      }
      hadchildren(pagination);
      createPage('span', 'pagination', 'page', num - 3, num - 1);
      if (document.querySelector('.colored') !== null) {
        document.querySelector('.colored').classList.remove('colored');
      }
      pagination.firstChild.classList.add('colored');
      hadchildren(ul);
      render2(ul, (num - 4) * 10, (num - 3) * 10 - 1);
      window.scrollTo(0, 0);
    };
  }

  return;
})(); // 즉시 실행함수!

// 기존의 ul안의 지우기
const hadchildren = (el) => {
  while (el.hasChildNodes()) {
    el.removeChild(el.firstChild);
  }
};

1칸씩 이동하는 걸 만들고 싶다면

  한칸씩 이동하는거로 짜봄!
     document.querySelector('#nextBtn').onclick = function () {
       let num = Number(document.querySelector('.colored').textContent);
       let numNext = document.querySelector('.colored').nextSibling;
       if (num === getNum) {// 마지막 번호일때 작동x
         return;
       }

       if ((num + 1) % 3 === 1) { 클릭한 페이지가 3n+1인경우. 3->4로 갈때 페이지번호 다시 렌더링하기 위해서!
         hadchildren(pagination);
         createPage('span', 'pagination', 'page', num + 1, num + 3);

         if (document.querySelector('.colored') !== null) {
           document.querySelector('.colored').classList.remove('colored');
         }
         pagination.firstChild.classList.add('colored');
       } else {
         document.querySelector('.colored').classList.remove('colored');
         numNext.classList.add('colored');
       }
       hadchildren(ul);
       render2(ul, num * 10, (num + 1) * 10 - 1);
       window.scrollTo(0, 0);
     };
     document.querySelector('#beforeBtn').onclick = function () {
       let num = Number(document.querySelector('.colored').textContent);
       let numBefore = document.querySelector('.colored').previousSibling;
       if (num === 1) {
         return;
       }

       if ((num - 1) % 3 === 0) {
         hadchildren(pagination);
         createPage('span', 'pagination', 'page', num - 3, num - 1);

         if (document.querySelector('.colored') !== null) {
           document.querySelector('.colored').classList.remove('colored');
         }
         pagination.lastChild.classList.add('colored');
       } else {
         document.querySelector('.colored').classList.remove('colored');
         numBefore.classList.add('colored');
       }
       hadchildren(ul);
       render2(ul, (num - 2) * 10, (num - 1) * 10 - 1);
       window.scrollTo(0, 0);
     };