[React Native] RefreshControl을 이용한 새로고침 기능 구현

메인 화면 구현이 끝나가는 도중 팀원들과 얘기되지 않았던 새로고침 기능에 대해서 떠올랐다. 현재 화면에서 사용자가 최신화된 정보를 받고 싶어 할 때처럼 사용자가 특정 행동을 원할 때 직접 제어할 수 있도록 해야 된다는 설계 원칙을 까먹어부렀다.

아래와 같이 빠르게 새로고침 기능을 구현해 보았다.

맨 밑의 시간대별 날씨는 수정 전이니 넘어가 주세요ㅜ

 

 

1. 내장되어 있는 RefreshControl 사용

react-native에 내장되어 있는 RefreshControl을 이용하면 빠르게 새로고침 기능을 구현할 수 있다. 아래 코드와 같이 import문을 먼저 작성한다.

import { RefreshControl } from 'react-native';

 

2. RefreshControl에 필요한 함수 및 State 작성

const [isRefreshing, setIsRefreshing] = useState(false);

const handleRefresh = async () => {
    setIsRefreshing(true);
    mainDataRefetch();
    reportDataRefetch();
    isLocationDataRefetch();
    setIsRefreshing(false);
};

 

isRefreshing은 어디다 쓰는 거지?

만약 우리가 새로고침을 위해 화면을 아래로 당긴다면 새로고침 중에는 동그란 모양으로 돌아가는 모양이 보일 것이다. 

isRefreshing이 true가 되면 해당 모양이 렌더링 되며 데이터들을 새로 받아오게 되고 데이터 전송이 완료되면 isRefreshing이 false가 되면서 원래 화면으로 돌아오게 되는 것이다.

 

간단히 말해서 화면을 아래로 당길 시 수행될 함수들을 setIsRefreshing(true)와 setIsRefreshing(false) 사이에 작성하면 된다.

3. ScrollView의 refreshControl 옵션에 아래와 같이 작성해 준다.

<MainScrollView
  scrollEnabled={true}
  refreshControl={
    <RefreshControl
      refreshing={isRefreshing}
      onRefresh={handleRefresh}
    />
  }
>
</MainScrollView>

 

주의할 점

• RefreshControl은 FlatList나 ScrollView에만 적용이 가능하다.
• 새로고침 기능을 추가하고 싶은 화면이 일반 View라면 해당 View를 ScrollView나 FlatList로 감싸주면 된다.

 

정상적으로 작동되는 것을 확인하고 싶다면 handleRefresh함수 사이에 로그를 찍어보면 된다.