이미지 리스트뷰 만들기

이번에는 FlatList를 이용해 Image List View를 구현해 보겠습니다.

FlatList는 ScrollView와 유사하게 스크롤을 할 수 있는 컴포넌트입니다.

ScrollView와 FlatList는 다음과 같은 차이가 있습니다.

ScrollView는 컴포넌트가 로드된 직후 모든 데이터를 로드하기 때문에 모든 데이터가 RAM에 저장됩니다. 따라서 성능 저하로 인해 많은 항목을 사용할 수 없습니다.

반면 FlatList는 기본적으로 10개의 항목을 로드하고, 사용자가 스크롤 하는 경우 다음 항목을 불러오도록 동작합니다. 따라서 ScrollView 대신 FlatList가 더 효율적입니다.

Data 준비

const flatListData = [
  {
    "key": "1",
    "image": "image1 URI"
  },
  {
    "key": "2",
    "image": "image2 URI"
  },
  {
    "key": "3",
    "image": "image3 URI"
  },
  {
    "key": "4",
    "image": "image4 URI"

  },
];

Item Component 구현

이번에는 각각의 이미지를 표현할 컴포넌트를 다음과 같이 구현합니다.

import React, {Component} from 'react';
import {Image, FlatList} from 'react-native';

function FlatListItem(props) {
  return (
    <Image source={{uri: props.item.image, width: 300, height: 300}}></Image>
  );
}

FlatList 구현

이제 FlatList를 이용해 다음과 같이 스크롤 기능을 구현하면 됩니다.

import React, {Component} from 'react';
import {FlatList, View} from 'react-native';

...

function ListViewer(props) {
  return (
    <View>
      <FlatList
        data={flatListData}
        // horizontal = {true} 가로 스크롤 여부 설정
        renderItem={({item, index}) => {
          return (
            <FlatListItem item={item} index={index}/>
          );
        }}
      />
    </View>
  );
}