React Native) FlatList란?

스크롤이 있는 화면을 만들 때 무엇을 써야하는가?

아래처럼 리엑트 네이티브로 스크롤 뷰를 만들 때 어떤 컴포넌트를 써야될까?

물론 처음 생각나는 건 ScrollView이다.

 

그러나 스크롤뷰의 큰 단점이 있는데, 뷰포트에 안 보이는 것까지 모두 다 렌더링 하는 컴포넌트라는 것이다.

그래서 서버에서 데이터를 몇십개를 가져오거나, 무한 스크롤로 계속 추가된다면 성능 상으로 매우 안 좋아진다.

 

 

 

FlatList가 더 나은 점

이를 보완하는게 FlatList이다. flatList를 쓰면 뷰포트 내에 있는 컴포넌트만 보이게 된다.

React Windowing 기법이 적용되었다고 보면 되려나..? 최적화가 더욱 잘 된 느낌이다.

 

 

FlatList 사용법

을 알아보기 전에 일단 ScrollView로 구현한 것을 보고가자.

일반적인 리액트 패턴이다. 서버에서 받아온 배열을 뿌려주는 패턴이다.

  ...
  return (
    // scrollView는 수많은 컴포넌트를 뷰포트에 나와있지 않아도 다 렌더하기 때문에 성능에 좋지 않다.
    <ScrollView style={styles.flatList}>
      {orders.map(item => (
        <View style={styles.orderContainer}>
          <Pressable onPress={toggleDetail} style={styles.info}>
            <Text style={styles.eachInfo}>
              <Text key={item.orderId}>{item.orderId}</Text>
            </Text>
          </Pressable>
        </View>
      ))}
    </ScrollView>
  );
}

 

그러나 FlatList를 사용한다면, 굳이 이렇게 return부를 길게 쓰지 않아도 괜찮다.

 

FlatList의 필수 속성

data: 실제 활용할 데이터이다.

keyExtractor: (map메소드로 순회할 때 key가 필요하듯이) key를 추출하여 돌린다.

renderItem: 내용을 담을 컴포넌트이다. 미리 만들어서 뿌리면 된다. 

  return (
    // scrollView는 수많은 컴포넌트를 뷰포트에 나와있지 않아도 다 렌더하기 때문에 성능에 좋지 않다.
    <FlatList
      data={orders}
      keyExtractor={item => item.orderId}
      renderItem={renderItem}
      style={styles.flatList}
    />
  );
}

 

 

렌더 아이템은 아래처럼 callback 함수로 반환하는 형식으로 만들면 된다. 이를 renderItem에 넣어준다.

  const renderItem = useCallback(({item}: {item: Order}) => {
    return (
      <View style={styles.orderContainer}>
        <Pressable onPress={toggleDetail} style={styles.info}>
          <Text style={styles.eachInfo}>
            <Text key={item.orderId}>{item.orderId}</Text>
          </Text>
        </Pressable>
      </View>
    );
  }, []);

  return (
    // scrollView는 수많은 컴포넌트를 뷰포트에 나와있지 않아도 다 렌더하기 때문에 성능에 좋지 않다.
    <FlatList
      data={orders}
      keyExtractor={item => item.orderId}
      renderItem={renderItem}
      style={styles.flatList}
    />
  );
}