스크롤할 때 더 많은 콘텐츠를 로드하고 표시하는 웹사이트나 앱을 본 적이 있습니까? 이것을 우리는 무한 스크롤이라고 부릅니다.
무한 스크롤은 많은 양의 콘텐츠를 더 쉽게 탐색할 수 있는 널리 사용되는 기술입니다. 또한 특히 모바일 장치에서 더욱 원활한 사용자 경험을 제공할 수 있습니다.
React에서는 몇 가지 다른 방법으로 무한 스크롤을 구현할 수 있습니다. 첫 번째는 React-Infinite-Scroll-Component와 같은 라이브러리를 사용하는 것입니다. 이 라이브러리의 구성요소는 사용자가 페이지 하단으로 스크롤할 때마다 이벤트를 트리거합니다. 그런 다음 이 이벤트를 신호로 사용하여 더 많은 콘텐츠를 로드할 수 있습니다.
React에서 무한 스크롤을 구현하는 또 다른 방법은 내장 기능을 이용하는 것입니다. 그러한 함수 중 하나는 React가 컴포넌트를 처음 마운트할 때 호출하는 “comComponentDidMount”입니다.
이 함수를 사용하여 첫 번째 데이터 배치를 로드한 다음, 사용자가 아래로 스크롤할 때 “comComponentDidUpdate” 함수를 사용하여 후속 데이터를 로드할 수 있습니다.
React 후크를 사용하여 무한 스크롤 기능을 추가할 수도 있습니다.
React-Infinite-Scroll-Component를 사용하는 방법에는 몇 가지가 있습니다.
목차
반응 무한 스크롤 구성 요소 설치
사용법을 시작하려면 먼저 npm을 통해 설치해야 합니다.
npm install react-infinite-scroll-component --save
React-Infinite-Scroll-Component를 React로 가져오기
설치 후에는 무한 스크롤 라이브러리를 React 구성 요소로 가져와야 합니다.
import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
class App extends React.Component {
constructor() {
super()
this.state = {
items: [],
hasMore: true
}
}componentDidMount() {
this.fetchData(1)
}
fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i )
}
if (page === 100) {
this.setState({ hasMore: false })
}
this.setState({ items: [...this.state.items, ...newItems] })
}
render() {
return (
<div>
<h1>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
이 코드는 반응 무한 스크롤 구성 요소 라이브러리에서 React 및 InfiniteScroll 구성 요소를 가져오는 것으로 시작됩니다. 그런 다음 상태 저장 구성 요소를 생성하고 빈 항목 배열과 True로 설정된 hasMore 플래그를 사용하여 초기화합니다.
매개변수 설정
componentDidMount 라이프사이클 메소드에서는 페이지 매개변수를 1로 설정하여 fetchData 메소드를 호출해야 합니다. fetchData 메소드는 데이터를 가져오기 위해 API 호출을 수행합니다. 이 반응 무한 스크롤러 예제는 일부 더미 데이터를 생성하고 100개 항목의 배열을 생성합니다.
페이지 매개변수가 100에 도달하면 더 이상 항목이 존재하지 않으므로 hasMore 플래그를 False로 설정할 수 있습니다. 이렇게 하면 InfiniteScroll 구성 요소가 더 이상 API를 호출하지 못하게 됩니다. 마지막으로 새 데이터를 사용하여 상태를 설정합니다.
render 메서드는 InfiniteScroll 구성 요소를 사용하고 일부 소품을 전달합니다. dataLength 소품은 항목 배열의 길이로 설정됩니다. 다음 prop은 fetchData 메소드로 설정됩니다. hasMore 소품은 hasMore 플래그와 동일하게 설정됩니다.
loader prop은 구성 요소가 해당 내용을 로딩 표시기로 렌더링하도록 합니다. 마찬가지로 모든 데이터 로드가 완료되면 endMessage 소품을 메시지로 렌더링합니다.
InfiniteScroll 구성 요소에 다른 소품을 전달할 수 있지만 가장 자주 사용하게 될 소품은 다음과 같습니다.
내장 기능 사용
React에는 InfiniteScroll을 구현하는 데 사용할 수 있는 몇 가지 내장 메서드도 있습니다.
첫 번째 방법은 componentDidUpdate입니다. React는 구성 요소를 업데이트한 후 이 메서드를 호출합니다. 이 방법을 사용하여 사용자가 페이지 하단으로 스크롤했는지 확인할 수 있습니다. 그렇다면 더 많은 데이터를 로드합니다.
두 번째 방법은 사용자가 스크롤할 때 React가 호출하는 스크롤입니다. 이 방법을 사용하여 스크롤 위치를 추적할 수 있습니다. 사용자가 페이지 하단으로 스크롤한 경우 더 많은 데이터를 로드할 수 있습니다.
다음은 이러한 메서드를 사용하는 방법을 보여주는 React 무한 스크롤 예제입니다.
import React, {useState, useEffect} from 'react'
function App() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
fetchData(page)
}, [page])
const fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i)
}
if (page === 100) {
setHasMore(false)
}
setItems([...items, ...newItems])
}
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
setPage(page + 1)
}
}
useEffect(() => {
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [items])
return (
<div>
{items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</div>
)
}
export default App
이 코드는 useState 및 useEffect 후크를 사용하여 상태 및 부작용을 관리합니다.
useEffect 후크 내에서 현재 페이지와 함께 fetchData 메소드를 호출합니다. fetchData 메소드는 데이터를 가져오기 위해 API 호출을 수행합니다. 이 예에서는 기술을 보여주기 위해 일부 더미 데이터를 생성하고 있습니다.
for 루프는 newItems 배열을 100개의 정수로 채웁니다. 페이지 매개변수가 100이면 hasMore 플래그를 False로 설정합니다. 이렇게 하면 무한 스크롤 구성 요소가 추가 API 호출을 수행하지 못하게 됩니다.
마지막으로 새 데이터로 상태를 설정합니다.
onScroll 메소드는 스크롤 위치를 추적합니다. 사용자가 페이지 하단으로 스크롤하면 더 많은 데이터를 로드할 수 있습니다.
useEffect 후크는 스크롤 이벤트에 대한 이벤트 리스너를 추가합니다. 스크롤 이벤트가 발생하면 onScroll 메서드가 호출됩니다.
React의 무한 스크롤을 사용하면 장단점이 있습니다. 사용자 인터페이스를 개선하여 특히 모바일 장치에서 더욱 원활한 경험을 제공합니다. 그러나 사용자가 콘텐츠를 볼 수 있을 만큼 아래로 스크롤하지 않기 때문에 콘텐츠가 누락될 수도 있습니다.
웹사이트나 앱에 구현하기 전에 무한 스크롤 기술의 장단점을 검토하는 것이 중요합니다.
React.js 웹사이트나 앱에 무한 스크롤을 추가하면 사용자 경험을 향상시킬 수 있습니다. 무한 스크롤을 사용하면 사용자가 더 많은 콘텐츠를 보기 위해 클릭할 필요가 없습니다. React.js 앱에서 무한 스크롤을 사용하면 페이지 로드 수를 줄여 성능을 더욱 향상시킬 수 있습니다.
또한 React 앱을 Github 페이지에 무료로 쉽게 배포할 수도 있습니다.
