[React Native] 리액트 네이티브 리스트 리프레쉬 리렌더링 재조회 하기 - FlatList

리액트 네이티브에서 목록을 만들 때 사용하는 리스트 중 FlatList를 구현했을때

목록을 재조회하는 기능에 대해서 구현했다.

 

흔히 사용하는 화면을 위에서 아래로 잡아 당기는(내리는) 모션으로 목록의 내용들을 리프레쉬하는 기능이다.

---

# FlatList re-render

const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
    if(!refreshing){
        getRefreshData();
    }
}

const getRefreshData = () => {
    setRefreshing(true);
    selectData();          //데이터 조회 함수 호출
    setRefreshing(false);
}

return(
    <FlatList
      data={}
      renderItem={}
      ...
      onRefresh={onRefresh}
      refreshing={refreshing}
    />
)

위와 같이 설정하여 적용해보면 리스트를 아래로 내리는 동작을 했을때

기존에 처음 리스트를 조회해온 함수를 호출하여

아래로 내릴때마다 목록을 다시 조회해 오는것을 알 수 있다.

다시 조회해올때, refresh 이미지가 로딩되는것도 확인할 수 있다.