[RN] FlatList 알아보기

📌 FlatList란?

FlatList는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 리액트네이티브 컴포넌트

 

흠... <ScrollView> 쓰면 되지 않나? 🤔

 

ScrollView:

• RN에서 많은 양의 데이터를 출력 할 때 <ScrollView> 사용
• 화면의 높이보다 내용물이 커질 때 자동으로 스크롤이 가능해짐
•  Scroll을 생성하여 화면에 벗어난 부분도 볼 수 있게 함
• 구현하려는 내용의 높이가 실제 화면의 높이보다 클 때 화면을 스크롤할 수 있도록 하기 위해 사용한다.

---

FlatList:

• RN에서 많은 양의 데이터를 출력할 때 사용
• 한 번에 모든 데이터를 렌더링하지 않고 화면에 보여지는 부분만 렌더링함 (--> 설정한 수만큼의 데이터만 보여지게 할수도 있음)
• 데이터의 길이가 가변적이고 데이터의 양을 예측할 수 없는 경우에 적절 
• 필요한 부분만 렌더링하고, 스크롤 시 새로운 요소를 동적으로 렌더링하여 성능을 최적화
• ex. API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우에 사용하기 적절

 

 

👩🏻‍💻 속성 및 사용법

1. prop 

data: 만들고자 하는 리스트의 리소스가 담김

renderItem: data로 받은 소스들 즉 각각의 item 들을 렌더 시켜주는 콜백함수

 

2. keyExtractor

• 각 아이템의 고유한 key 반환
• -> React가 각 아이템을 고유하게 식별할 수 있도록 한다.
• React는 key를 사용하여 어떤 아이템이 추가, 삭제, 또는 이동되었는지를 추적
• -> DOM 업데이트를 최소화하고 성능을 최적화
• key가 없으면 React는 리스트 전체를 다시 렌더링해야 할 수 있다.

ex) keyExtractor={(item, index) => index.toString()}

 

3. ListFooterComponent

•  리스트의 마지막에 표시할 컴포넌트를 정의

 

4. 메모이제이션(Memoization)

• 동일한 입력에 대해 함수가 이전에 계산한 결과를 저장하게 한다.
• -> 같은 입력이 주어졌을 때 재계산하지 않고 저장된 값을 반환한다.
• -> 즉 props 가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않는다. (=불필요한 리렌더링 방지)
• -> 동일한 props로 호출이 될 때 이전 렌더링 결과를 재사용하지 않는다. 

 

5. 로딩상태처리

• 데이터가 로드되는 동안 로딩 스피너(ActivityIndicator)를 표시.
• 로딩이 완료되면 FlatList를 렌더링한다.

 

코드를 보면서 이해해보자!

1. useState 변수 설정

const hilonghilong = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

 

내 블로그이름으로 예시를 들어보겠다.

일단 API 를 가져와서 렌더링 되어 상태가 업데이트 될 것이기 때문에 useState 를 사용하여 

상태 업데이트를 나타내준다.

 

또한 로딩 상태를 보여주기 위한 로딩상태업데이트도 나타내준다.

 

 

2. API 호출하여 데이터를 가져올 함수 정의

// 데이터를 가져오는 함수
  const fetchData = async () => {
    try {
      // API 호출을 시뮬레이션하기 위한 타임아웃
      setTimeout(() => {
        const sampleData = [
          { id: '1', name: 'Item 1', description: 'This is item 1' },
          { id: '2', name: 'Item 2', description: 'This is item 2' },
          { id: '3', name: 'Item 3', description: 'This is item 3' },
          { id: '4', name: 'Item 4', description: 'This is item 4' },
          { id: '5', name: 'Item 5', description: 'This is item 5' },
        ];
        setData(sampleData);
        setLoading(false);
      }, 2000);
    } catch (error) {
      console.error(error);
    }
  };
  
  useEffect(() => {
    fetchData(); // 컴포넌트가 마운트될 때 데이터 가져오기
  }, []);

 

async 를 사용하여 비동기 함수로 설정을 해주고

API 호출을 하여 데이터를 가져오도록 한다. 

 

비동기 함수가 완료되면 실행될 코드를 setData와 setloading 으로 설정해주었다. 

-> setData 에 sampleData를 넣어줄 것이다. (// 나중에는 API 호출을 넣어주면 된다.)

-> setLoading 을 false로 설정하여 로딩화면이 없어지도록 설정해준다.

 

오류가 일어나면 catch 에서 오류가 보여지도록 설정해준다.

 

그리고 useEffect 를 사용하여 코드가 계속해서 렌더링되는 오류를 해결해줄 수 있고

컴포넌트가 마운트될 때 fetchData를 보여질 수 있다. 

빈 배열을 넣어서 한번만 렌더링되도록 하였다.

 

 

3. 아이템 렌더링

// 각 아이템을 렌더링하는 함수
  const renderItem = ({ item }) => (
    <View >
      <Text >{item.name}</Text>
      <Text >{item.description}</Text>
    </View>
  );

 

item 을 props 로 가져와 name 과 descritiption 이 실제 화면에 보이게끔 렌더링하는 함수다

여기서 style 을 입힐 수 있다. 

 

4. 로딩중일 때 화면 & return 값

 // 로딩 중일 때 로딩 스피너를 표시
  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

최종적으로 화면에 보여지는 것들을 return 해준다. 

Flatlist함수를 사용하여 위의 것들을 다 렌더링 해줄 수 있다. 

 

전체예시코드

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList, ActivityIndicator } from 'react-native';

const hilonghilong = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  // 데이터를 가져오는 함수
  const fetchData = async () => {
    try {
      // API 호출을 시뮬레이션하기 위한 타임아웃
      setTimeout(() => {
        const sampleData = [
          { id: '1', name: 'Item 1', description: 'This is item 1' },
          { id: '2', name: 'Item 2', description: 'This is item 2' },
          { id: '3', name: 'Item 3', description: 'This is item 3' },
          { id: '4', name: 'Item 4', description: 'This is item 4' },
          { id: '5', name: 'Item 5', description: 'This is item 5' },
        ];
        setData(sampleData);
        setLoading(false);
      }, 2000);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // 각 아이템을 렌더링하는 함수
  const renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <Text style={styles.itemName}>{item.name}</Text>
      <Text style={styles.itemDescription}>{item.description}</Text>
    </View>
  );

  // 로딩 중일 때 로딩 스피너를 표시
  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};