[실습1] 페이징 구현하기

이짜젠·2021년 9월 6일
0
post-custom-banner

1. 페이지의 값을 기억

현제 페이지 위치값을 기억하는 변수값을 가지고있어야한다.
전역으로 관리되어야하는 상태값이므로 전역변수로 선언하여 사용한다.

const store = {
  currentPage: 1
}

2. 페이지 UI 작성

function newsFeed() {
// ...
  newsList.push(`
    <div>
      <a href="#/page/${store.currentPage - 1}">이전 페이지</a>
      <a href="#/page/${store.currentPage + 1}">다음 페이지</a>
    </div>
  `);
  containerEl.innerHTML = newsList.join("");

3. route path 구조 잡기

function newsFeed() {
	// ...
for (let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++) {
    newsList.push(`
      <li>
        <a href="#/show/${newsFeed[i].id}">
          ${newsFeed[i].title}(${newsFeed[i].comments_count})
        </a>
      </li>
    `);
  }
  // ...
}

function newsDetail() {
  //...
  containerEl.innerHTML = `
    <h1>${newsContent.title}</h1>
    <div>
      <a href="#/page/${store.currentPage}">목록으로</a>
    </div>
  `;
  //...
}

function router() {
  const routePath = location.hash;

  if (routePath === "") {
    newsFeed();
  } else if (routePath.indexOf("#/page/") >= 0) {
    const page = Number(routePath.substr(7));
    store.currentPage = page;
    newsFeed();
  } else {
    newsDetail();
  }
}
profile
오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.
post-custom-banner

0개의 댓글