[React-Native] FlatList

모든 데이터를 한번에 불러와 리스트로 나타내는 ScrollView와 다르게 FlatList는 화면에 보이는 부분만 렌더링하는 차이가 있다. 

따라서 데이터에 변화가 있을 경우에는 FlatList를 사용하는 편이 좋다.

 

필요한 모듈

import {FlatList} from 'react-native';

 

데이터 배열 선언

리스트에 들어갈 데이터를 미리 선언해서 넣어보자. 

const Data = [
  {
    id: 1,
    title: 'One',
    des: 'Touch this',
  },
  {
    id: 2,
    title: 'Two',
    des: 'Touch this',
  },
  {
    id: 3,
    title: 'Three',
    des: 'Touch this',
  },
  {
    id: 4,
    title: 'Four',
    des: 'Touch this',
  },
  {
    id: 5,
    title: 'Five',
    des: 'Touch this',
  },
  {
    id: 6,
    title: 'Six',
    des: 'Touch this',
  },
  {
    id: 7,
    title: 'Seven',
    des: 'Touch this',
  },
];

 

리스트 컴포넌트 디자인

data 배열로부터 item을 가져와 리스트에 렌더링하기 위한 코드이다.

useState를 써서 컴포넌트를 클릭할 때 해당 컴포넌트의 색깔이 바뀌게 해보자.

style은 디자인을 조금 더 예쁘게 하기 위한 것이니 전체 코드에 가서 확인해볼 수 있다.

Hook은 꼭 App안에 들어가야 함을 잊지 말자!

const [selectedId, setSelectedId] = useState(null);

const renderItem = ({item}) => {
    const backgroundColor = selectedId === item.id ? '#CFFF8D' : '#DBDFFD';
    return (
      <TouchableOpacity onPress={() => setSelectedId(item.id)} style={[styles.item, backgroundColor]}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.description}>{item.des}</Text>
      </TouchableOpacity>
    );
};

return문 안에 있는 코드는 리스트의 각 컴포넌트의 디자인이며 item은 데이터랑 연결했을 때 데이터 배열의 요소를 배정한다.

아래의 데이터를 배정한다고 했을 때 item.title 에는 'One' 이 들어간다.

{
    id: 1,
    title: 'One',
    des: 'Touch this',
}

 

화면에 보이기

이제 아래와 같이 <FlatList>를 사용해서 위에서 선언한 것들을 합쳐보자.

const App = () => {
  //const renderItem~~
  
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={Data}
        renderItem={renderItem}
        keyExtractor={item => item.id} //list의 키로 사용
      />
    </SafeAreaView>
  );
};

 

전체 코드

전체 코드는 아래와 같다.

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

const Data = [
  {
    id: 1,
    title: 'One',
    des: 'Touch this',
  },
  {
    id: 2,
    title: 'Two',
    des: 'Touch this',
  },
  {
    id: 3,
    title: 'Three',
    des: 'Touch this',
  },
  {
    id: 4,
    title: 'Four',
    des: 'Touch this',
  },
  {
    id: 5,
    title: 'Five',
    des: 'Touch this',
  },
  {
    id: 6,
    title: 'Six',
    des: 'Touch this',
  },
  {
    id: 7,
    title: 'Seven',
    des: 'Touch this',
  },
];

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

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

  const renderItem = ({item}) => {
    const backgroundColor = selectedId === item.id ? '#CFFF8D' : '#DBDFFD';
    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        backgroundColor={{backgroundColor}}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={Data}
        renderItem={renderItem}
        keyExtractor={item => item.id} //list의 키로 사용
        extraData={selectedId} // selectedId가 변할 때 자동으로 렌더링
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 10,
  },
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
  },
  description: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
});

export default App;

 

실행화면