무한 스크롤은 웹사이트 및 모바일 애플리케이션에서 일반적으로 관찰되는 디자인 기능으로, 사용자가 새로운 정보에 액세스하기 위해 개별적인 클릭 또는 탐색 동작을 요구하지 않고 페이지를 아래로 스크롤할 때 추가 콘텐츠가 지속적으로 로드되고 표시되는 것을 말합니다.
무한 스크롤의 활용은 널리 보급되어 상당한 양의 정보를 정독하는 데 유리하며, 궁극적으로 특히 모바일 플랫폼을 통해 액세스 할 때 향상된 사용자 경험에 기여합니다.
React.js에서 무한 스크롤 구현하기
React 애플리케이션에서 무한 스크롤을 구현하는 한 가지 접근 방식은 “react-infinite-scroll-component”와 같은 서드파티 라이브러리를 활용하는 것입니다. 이 라이브러리는 재사용 가능한 컴포넌트를 제공하여 사용자의 웹페이지 진행 상황을 모니터링하고, 사용자가 사용 가능한 콘텐츠의 끝에 도달했음을 감지하면 추가 데이터를 가져오는 데 사용할 수 있는 신호를 생성합니다.
React는 네이티브 메서드를 통해 무한 스크롤을 쉽게 구현할 수 있습니다. 이러한 메소드 중 React가 컴포넌트를 초기화할 때 호출하는 “componentDidMount” 생명주기 메소드를 활용할 수 있습니다.
이 기능을 사용하면 초기 데이터 세트를 로드하는 데 특정 함수를 사용한 다음 사용자가 페이지를 더 아래로 스크롤할 때 추가 정보를 가져오는 데 `componentDidUpdate` 수명주기 메서드를 사용할 수 있습니다.
사용자가 콘텐츠를 스크롤할 때 원활한 데이터 업데이트와 뷰 렌더링을 촉진하여 애플리케이션에서 무한 스크롤 기능을 구현할 수 있는 편리한 메커니즘을 제공합니다.
react-infinite-scroll-component 라이브러리 사용하기
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 컴포넌트를 도입하는 것으로 시작하며, 이 두 요소는 모두 높은 평가를 받고 있는 react-infinite-scroll-component 라이브러리에서 가져온 것입니다. 그 후, 기본값이 true로 설정된 hasMore 플래그와 함께 빈 아이템 배열이 처음에 부여되는 상태 저장 컴포넌트를 생성합니다.
매개변수 설정
`componentDidMount` 수명 주기 메서드를 실행하는 동안 페이지 매개변수를 1로 설정하여 `fetchData` 메서드를 호출해야 합니다. `fetchData` 메서드는 데이터를 획득하기 위한 API 요청을 쉽게 설정할 수 있도록 합니다. 이 예시에서는 React 무한 스크롤 데모를 통해 시뮬레이션된 데이터를 생성한 후 100개의 개별 요소로 구성된 배열을 생성합니다.
페이지 매김 매개변수의 값이 100에 도달하면 더 이상 가져올 항목이 남지 않으므로 InfiniteScroll 컴포넌트에서 더 이상 요청하지 않도록 “hasMore” 플래그를 구성하는 것이 현명합니다. 그런 다음 새로 획득한 정보를 사용하여 애플리케이션의 내부 상태를 적절히 업데이트합니다.
렌더 메서드는 InfiniteScroll 컴포넌트를 활용하여 콘텐츠를 렌더링하는 동안 특정 속성을 고려합니다. 구체적으로, “dataLength” 속성의 값을 “items” 배열의 길이와 일치하도록 설정합니다. 또한 후속 프로퍼티로 “fetchData” 함수를 연결합니다. 마지막으로, 추가 처리를 위해 “hasMore” 플래그의 상태를 설정합니다.
로더 프로퍼티는 컴포넌트의 콘텐츠를 로딩 표시기로 표시하는 역할을 담당합니다. 반대로 필요한 모든 데이터가 로드되면 endMessage 속성의 값을 표시합니다.
무한 스크롤 컴포넌트는 다양한 요구 사항을 충족하는 다양한 커스터마이징 가능한 프로퍼티를 지원합니다. 그러나 자주 사용되는 매개변수 중에는 이 특정 컴포넌트에 전달되는 매개변수가 있습니다.
내장 함수 사용
또한 React는 InfiniteScroll을 효과적으로 구현하는 데 활용할 수 있는 특정 사전 정의 메서드를 제공합니다.
컴포넌트 중 하나에서 업데이트를 감지하면 React는 `componentDidUpdate` 생명주기 메서드를 호출합니다. 이 메서드를 통해 개발자는 사용자가 웹페이지에서 스크롤 가능한 콘텐츠의 엔드포인트에 도달했는지 여부를 확인할 수 있습니다. 이러한 판단에 따라 추가 표시를 위해 추가 데이터를 가져와 로드할 수 있습니다.
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` 훅을 사용합니다.
사용 효과 훅을 실행하는 동안 페이지의 현재 반복과 함께 fetchData 함수가 호출됩니다. 이 작업은 API 요청을 통해 데이터를 검색하는 fetchData 메서드에 의해 수행됩니다. 이 예시에서는 설명의 목적으로만 설명하는 개념을 설명하기 위해 몇 가지 임의의 데이터를 생성하고 있습니다.
반복 프로시저는 새로 생성된 항목 배열에 100개의 정수 값을 할당합니다. 페이지 매개변수의 값이 100과 같으면 hasMore 플래그를 거짓으로 설정하여 무한 스크롤 요소에 의한 추가 호출을 종료합니다.
마지막으로 업데이트된 정보를 통합하여 현재 상태를 설정합니다.
`온스크롤` 메서드는 웹 페이지 내에서 현재 스크롤 위치를 모니터링하고 인지하는 수단으로, 사용자가 기존 콘텐츠의 하단에 도달했을 때 추가 콘텐츠를 로드할 수 있도록 합니다.
`useEffect` 훅을 활용하여 스크롤 이벤트에 대한 리스너를 도입합니다. 스크롤 이벤트 발생에 대한 응답으로 구현은 `onScroll` 메서드를 호출합니다.
React에서 무한 스크롤의 장단점
React의 무한 스크롤을 활용하면 장점과 단점이 모두 있습니다. 한편으로, 이 접근 방식은 특히 모바일 플랫폼에서 원활한 탐색 경험을 제공함으로써 사용자 인터페이스를 향상시킵니다. 반대로 사용자가 모든 콘텐츠를 보기 위해 충분히 스크롤하지 않으면 일부 콘텐츠를 놓칠 수 있는 위험이 있습니다.
웹 애플리케이션에서 무한 스크롤 기능의 구현을 고려할 때는 잠재적인 장점과 단점을 신중하게 평가하는 것이 중요합니다. 이 평가는 이 디자인 선택이 프로젝트의 목표에 부합하고 사용자 경험에 긍정적으로 기여하는지 여부를 결정하는 데 도움이 됩니다.
React.js에서 무한 스크롤로 사용자 경험 개선
무한 스크롤 메커니즘 구현을 통해 React.js 웹사이트 또는 애플리케이션에서 사용자 경험을 개선하는 것은 매우 유익합니다. 이 기능을 통합하면 사용자가 추가 콘텐츠를 수동으로 탐색하지 않아도 됩니다. 무한 스크롤을 React.js 애플리케이션에 통합하면 페이지 새로고침 빈도를 줄일 수 있을 뿐만 아니라 전반적인 성능 향상에도 긍정적으로 기여합니다.
GitHub 페이지에 React 애플리케이션을 배포하는 것은 비용이 들지 않는 손쉬운 프로세스입니다.