페이지 처리

페이지 처리

페이지네이션 (Pagination)
무한 스크롤 (Infinite scroll

 

 

---

Pagination

페이지네이션이란?

콘텐츠를 여러 페이지로 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법이다.

 

페이지네이션 구현하기

• 필요 조건
  • 총 데이터 수 = totalItem
  • 현재 페이지 = currentPage
  • 총 페이지 수 = pageLength
  • 한 페이지에 나타낼 데이터 수 = itemPerPage

// 총 페이지 수 = Math.ceil(전체 개수 / 한 페이지에 나타낼 데이터 수)
const pageLength = Math.ceil(totalItem / itemPerPage)

 

// 데이터 가져오기
 
getData = () => {
	const { currentPage, itemPerPage, totalItem, DataList } = this.state
	console.log(currentPage)
	axios.get(`http://url?offset=${currentPage}&limit=${itemPerPage}`)
	  .then(response => {
	      this.setState({
	          DataList: response.data.list,
	          totalItem: response.data.count
	      })
	  })
	  .catch(error => {
	      console.log(error)
	  })
}
 
// 페이지 번호 클릭 시
 
handlePageNumberClicked = newPage => {
  this.setState({ currentPage: newPage }, () => this.getCommunity())
}
 
// 총 페이지 수 랜더
 
renderPage = () => {
  const { totalItem, itemPerPage, currentPage } = this.state
  const pageLength = Math.ceil(totalItem / itemPerPage)
  const pageNumbers = []
  for (let i = 0; i < pageLength; i++) {
      pageNumbers.push(i)
  }
  return pageNumbers.map(item => {
    return (
	 <span 
	  className={`community-page ${(item === currentPage ? 'active' : '')}`} 
	  onClick={()=>this.handlePageNumberClicked(item)}>
	    {item+1}
	 </span>
    )
	})
}
 
// HTML
 
render() {
	  return (
	    <div className='community-page-area'>
	        {this.renderPage()}
	    </div>
	  )
 }

//SCSS
 
.community-page-area {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;
 
            .community-page {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                width: 25px;
                border: 3px solid gainsboro;
                cursor: pointer;
 
                &.active {
                    font-weight: bold;
                    background-color: gainsboro;
                    color: white;
                }
            }
        }

 

결과

 

 

 

---

Infinite scroll

무한 스크롤이란 ?

• 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식이다.
• 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주어 많은 양의 콘텐츠를 스크롤 해서 볼 수 있다.

 

무한 스크롤의 장점

• 사용자 참여 및 콘텐츠 탐색이 쉽다.
• 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공한다.
• → 다음 콘텐츠를 보기 위한 추가 클릭이 필요없고 페이지 로드 시간이 짧다.
• 터치스크린(모바일)일때 더 유용하게 적용된다.
• → 화면이 작을수록 스크롤은 길어지기 때문에 모바일 환경에서 보다 직관적이고 사용하기 쉽다.

 

무한 스크롤의 단점

• 페이지 성능이 느려진다.
• 특정 항목 검색 및 원래 위치로 되돌아오기 힘들다.
• 스크롤 막대가 실제 데이터양을 반영하지 못한다.

 

무한 스크롤 구현하기

• 필요 조건
  • window.innerHeight : element(요소)의 높이 + padding
  • window.scrollY : 현재 스크롤된 부분의 높이 (=현재 스크롤의 위치) ⇒ 스크롤을 하지 않았다면 0이고, 스크롤을 할 때마다 값이 증가한다.
  • scrollHeight : 요소 콘텐츠의 총 높이 (= 스크롤 대상의 총 높이)
    
    
    

1. 스크롤이 끝까지 된 경우, innerHeight 와 scrollY 의 합은 scrollHeight 와 같거나 더 크게 되는 특성을 이용하여 스크롤이 끝까지 되었으면 추가 데이터를 로딩하면 된다!
   

   onBodyScroll = e => {
     const { document: { body: { scrollHeight } }, innerHeight, scrollY } = window
     this.scroll = scrollY
     if (innerHeight + scrollY > scrollHeight) {
       this.getData()
     }
   }
   ​

   
   
   
2. 리액트는 새 페이지를 랜더링 한 후 스크롤을 맨 위로 올려주지 않기 때문에, window.onbeforeunload 를 사용하여 스크롤 위치를 위로 올려주면 된다!
   
   • (무한 스크롤 같이 스크롤 위치로 구현된 코드에서 새로고침 시, 스크롤이 맨위에 위치하지 않아 원하는 데이터의 갯수보다 더 많이 가져온다.)

componentDidMount() {
        window.onbeforeunload = function () {
            window.scrollTo(0, 0);
          }
    }
​

💡  window.onbeforeunload    onbeforeunload 이벤트는 사용자가 페이지를 떠날 때 발생한다. 새로고침 뒤로 가기 브라우저 닫기 form submit