인스타그램이나 페이스북 앱을 사용할때 스크롤을 아래로 당기면 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차 개발을 하고있는데 아무래도 유저가 실제 결제를 하는 프로젝트다 보니 구매 취소 환불 반품 배송중 배송완료 구매완료... 등 상태관리에 치여 살고있다. 끝없는 야근이 지속되지만 밸로그를 멈추지 않기로 나 자신과 약속 했기때문에 꾸준히 올려보도록 하겠다.