study: 리네다기 | 9장 - FlatList 성능 개선, RefreshControl

FlatList 에서 renderItem 이 길어질 경우
컴포넌트 밖에 선언하여 사용하면 렌더링할 때마다 만드는것 보다 성능에 유리하다

useMemo 를 사용하는 것도 방법

RefreshControl

 <FlatList
      data={posts}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      contentContainerStyle={styles.container}
      onEndReached={onLoadMore}
      onEndReachedThreshold={0.75}
      ListFooterComponent={
        !noMorePost && (
          <ActivityIndicator style={styles.spinner} size={32} color="#6200ee" />
        )
      }
      refreshControl={
        <RefreshControl onRefresh={onRefresh} refreshing={refreshing} />
      }
    />

react native의 RefreshControl 컴포넌트는
당겨서 새로고침을 담당한다
onRefresh 와 refreshing 속성을 갖는다
onRefresh 는 새로고침 시 실행할 함수를 받는다

refreshing 은 로딩 스피너가 화면에 표시되어야 하는지에 대한
boolean 값을 받는다
값을 상태로 관리하여
화면을 새로고침할 데이터를 요청 시 true
다 불러와지면 false 로 변경하여 사용

FlatList 는 RefreshControl 컴포넌트를
받을 수 있게 되어있다