JavaScript
페이지 처리
히찔
2022. 2. 11. 15:43
페이지 처리
페이지네이션 (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 : 요소 콘텐츠의 총 높이 (= 스크롤 대상의 총 높이)
- 스크롤이 끝까지 된 경우, innerHeight 와 scrollY 의 합은 scrollHeight 와 같거나 더 크게 되는 특성을 이용하여 스크롤이 끝까지 되었으면 추가 데이터를 로딩하면 된다!
onBodyScroll = e => { const { document: { body: { scrollHeight } }, innerHeight, scrollY } = window this.scroll = scrollY if (innerHeight + scrollY > scrollHeight) { this.getData() } } - 리액트는 새 페이지를 랜더링 한 후 스크롤을 맨 위로 올려주지 않기 때문에, window.onbeforeunload 를 사용하여 스크롤 위치를 위로 올려주면 된다!
- (무한 스크롤 같이 스크롤 위치로 구현된 코드에서 새로고침 시, 스크롤이 맨위에 위치하지 않아 원하는 데이터의 갯수보다 더 많이 가져온다.)
componentDidMount() {
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
}
| 💡 window.onbeforeunload onbeforeunload 이벤트는 사용자가 페이지를 떠날 때 발생한다.
|
반응형