Pull to Refresh란?

"Pull to Refresh"는 모바일 앱에서 화면을 아래로 당겼다가 놓으면 데이터가 새로 고쳐지는 기능입니다. 주로 리스트나 피드처럼 업데이트가 필요한 화면에서 자주 사용됩니다. 예를 들어, SNS 피드를 아래로 당기면 새로운 게시물이 자동으로 로드되는 방식입니다.

<aside> 💡

새로 데이터를 받아오는 것(Refresh) 대신에 Refetch하는게 더 효율적이지 않나요?

무한 스크롤로 데이터를 많이 가져온 상황에서 다시 데이터를 새로 받아오려면, 기존에 로드한 데이터만큼을 다시 리패치해야 하기 때문에 비효율적입니다. 이 경우 Pull to Refresh를 통해 새로고침하는 것이 더 효율적입니다. Pull to Refresh는 간단히 현재 데이터를 갱신할 수 있어, 이미 불러온 대량의 데이터를 다시 로드하는 리소스를 절약할 수 있습니다.

</aside>

Pull to Refresh 적용

우리는 웹뷰를 사용하고 있기 때문에 웹에서 <InfiniteScroller /> 를 활용하여 Pull to Refresh를 적용해보겠습니다.

먼저 <InfiniteScroller /> 에 있는 Pull to Refresh와 관련된 속성부터 알아볼까요?

pullDownToRefres

• 이 속성은 풀투리프레시 기능을 활성화합니다. true로 설정하면 사용자가 화면을 아래로 당길 때 새로고침을 시도할 수 있습니다.
• 기본적으로 스크롤이 가능한 영역에서만 이 기능이 활성화되며, 사용자가 일정 부분 스크롤을 당기면 새로고침이 트리거됩니다.

pullDownToRefreshThreshold

• 이 속성은 사용자가 화면을 얼마나 많이 당겨야 새로고침이 시작될지를 설정합니다.
• 150으로 설정하면, 사용자가 화면을 150px 이상 당길 때 풀투리프레시가 가능한 상태로 변합니다.
• 이 값이 작으면 사용자가 적게 당겨도 새로고침이 가능하고, 값이 클수록 더 많이 당겨야 리프레시가 시작됩니다.

pullDownToRefreshContent

• 사용자가 화면을 살짝 당겼을 때 표시되는 내용을 설정하는 부분입니다.

releaseToRefreshContent