[React Native] List Component Optimization Feat. useCallback

FlatList, SectionList, RecyclerListView 등 List를 표현하기 위한 다양한 방법들이 있다.
복잡하고 큰 리스트의 경우 연산을 기억하여 렌더링까지 걸리는 시간을 줄이는 것이 사용자 경험에 중요한 역할을 하기 때문에 useCallback을 활용하여 최적화 작업을 해보자.

가장 많이 쓰이는 FlatList로 예시를 들어보겠다.

const Item = ({title}: ItemProps) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);
      <FlatList
        data={DATA}
        renderItem={({item}) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />

FlatList의 공식문서에 나와있는 기본적인 사용법이다. 렌더링이 되는 Item 부분에 useCallback을 적용해보자

const Item = useCallback(
  ({ title }: ItemProps) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  ),
  [DATA],
);

useCallback을 사용하여 최적화 작업을 하였다. 마지막 부분의 의존성 배열에, 사용하고 있는 데이터를 등록 해줘서 데이터 변화가 있을 경우 상태가 바로 적용 되도록 주의해서 설정 해주자. 제대로 해주지 않으면 컴포넌트가 제대로 렌더링 되지 않는 버그가 발생할 수 있다.

자 그러면 다들 즐코 !