15. React-Native FlatList

FlatList 컴포넌트는 많은 양의 리스트 아이템을 보여주고 할 떄 쓰이는 React-Native 컴포넌트이다. Scroll View와 유사한 기능을 하나 동작 방식에 차이점이 있다.

<Scroll View>

는 데이터가 화면에 보이지 않을 때 사용자가 Swipe를 통해 안보이는 데이터를 볼 수 있도록 하기위한 컴포넌트이다. 다시 말해서 출력해야하는 데이터가 고정적이고 많지 않을 때 간단하게 사용할 수 있는 컴포넌트이다.

<FlatList>

는 모든 데이터를 한번에 렌더링하는 것이 아니라 보여지는 부분이나 혹은 수동으로 설정한 양 만큼의 데이터만 렌더링이 되고 화면에 데이터가 보여지지 않는 곳은 기다렸다가 사용자가 swipe를 할 때 swipe한 화면의 크기만큼 자동으로 리렌더링이 되어 보여지는 컴포넌트이다. 다시 말해서 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우에 사용하기 적절하다.

—Example

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '4',
    title: 'Forth Item',
  },
  {
    id: '5',
    title: 'Fifth Item',
  },
  {
    id: '6',
    title: 'Sixth Item',
  },
  {
    id: '7',
    title: 'Seventh Item',
  },
  {
    id: '8',
    title: 'Eighth Item',
  },
  {
    id: '9',
    title: 'Ninth Item',
  },
  {
    id: '10',
    title: 'Tenth Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

→ data 딕셔너리가 FlatList를 통해 보여지는 예제

 

—Example2

import React, { useState } from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar, TouchableOpacity } from 'react-native';

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '4',
    title: 'Forth Item',
  },
  {
    id: '5',
    title: 'Fifth Item',
  },
  {
    id: '6',
    title: 'Sixth Item',
  },
  {
    id: '7',
    title: 'Seventh Item',
  },
  {
    id: '8',
    title: 'Eighth Item',
  },
  {
    id: '9',
    title: 'Ninth Item',
  },
  {
    id: '10',
    title: 'Tenth Item',
  },
];

const Item = ({ item, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
    <Text style={styles.title}>{item.title}</Text>
  </TouchableOpacity>
);



const App = () => {
  const [selectedId, setSelectedId] = useState(null)

  const renderItem = ({ item }) => {
    //id가 selectedId라면 배경색상 변경
    const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";

    return (
      <Item
        item={item}
        //아이템을 클릭하면 selectedId가 변경
        onPress={() => setSelectedId(item.id)}
        style={{ backgroundColor }}
      />
    )
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        //리스트의 소스를 담는 속성
        data={DATA}
        //data로 받은 소스의 아이템들을 render 시켜주는 콜백함수
        renderItem={renderItem}
        //item의 고유의 키를 부여하는 속성
        keyExtractor={item => item.id}
        //selectedId가 변경되면 리렌더링 되도록 하는 속성
        extraData = {selectedId}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

→ FlatList의 요소를 클릭하면 배경색상이 변경되어 리렌더링되는 예제

 

—Required Props

• data : FlatList의 소스를 담는 공간이다. (Array)

• renderItem : data로 받은 소스의 item들을 통해 render 시켜주는 콜백함수이다.

 

—Props

• horizontal(boolean) : 리스트를 가로로 보여지게 하는 속성(default : false)

• keyExtractor(item, index) : item에 고유의 키를 주는 속성

• extraData : 해당 데이터가 변경시에 FlatList가 리렌더링되는 속성

• numColumns(number) : 리스트를 여러열로 표현할 때 사용

• onEndReachedThreshold(number) : onEndReached를 호출할 시점(0.0 ~ 1)을 저장 (default: 1)

• onEndReached (function): 해당 시점에 도달하면 function을 실행한다.

 

—Methods

• scrollToEnd() : FlatList의 가장 끝부분으로 이동하는 함수

• scrollToIndex() : FlatList의 원하는 index로 이동하는 함수

  srcollToIndex({animated: bollean, index: number}) 
  //index 파라미터 대신에 viewOffset(number), viewPosition(number)사용가능

  viewOffset(number) : 원하는 픽셀로 이동하는 함수

  viewPosition(0 ~ 1) : 최상단 = 0, 최하단 = 1 이고 지정한 위치로 이동

 

 

Uploaded by Notion2Tistory v1.1.0