[React Native] RefreshControl

인스타그램이나 페이스북 앱을 사용할때 스크롤을 아래로 당기면 Refresh가 되서 새로운 데이터를 가지고 온다.
오늘은 앱의 Refresh기능을 할수있는 RefreshControl 대해 알아보자

import {RefreshControl} from 'react-native';

우선 리액트 네이티브에서 RefreshControl를 import시켜주자

      <FlatList
        refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh}/>}
        />

그리고 FlatList나 ScrollView안에 위와같이 작성해준다

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

  const handleRefresh = async () => {
    console.log('handleRefreshStore');
    setIsRefreshing(true);
    functionYouWantToRefresh();
    setIsRefreshing(false);
  };

useState를 사용하여 Boolean props로 사용할 isRefreshing 을 만든 후 handleRefresh 함수를 위와 같이 만들어 준다. setIsRefreshing 중간에 다시 호출하고 싶은 값을 넣어준다 functionYouWantToRefresh()

오늘은 여기까지 !

요즘 E-commerce 2차 개발을 하고있는데 아무래도 유저가 실제 결제를 하는 프로젝트다 보니 구매 취소 환불 반품 배송중 배송완료 구매완료... 등 상태관리에 치여 살고있다. 끝없는 야근이 지속되지만 밸로그를 멈추지 않기로 나 자신과 약속 했기때문에 꾸준히 올려보도록 하겠다.