React Native FlatList 성능 최적화 정리: keyExtractor부터 getItemLayout까지

리스트 화면은
React Native 앱에서 가장 흔하면서도
가장 쉽게 느려지는 부분이다.

처음엔 잘 동작하다가
데이터가 조금만 늘어나면 이런 증상이 나온다.

• 스크롤이 끊긴다
• 이미지 로딩이 버벅인다
• 입력할 때 리스트 전체가 다시 그려진다

이 글에서는
FlatList를 쓸 때 실무에서 꼭 챙기는 성능 포인트를
옵션 중심으로 정리한다.

---

이 글이 필요한 사람

• FlatList 스크롤이 부드럽지 않은 경우
• 리스트 아이템이 많아질 예정인 경우
• 성능 최적화를 어디서부터 해야 할지 모르는 경우

---

FlatList가 기본적으로 빠른 이유

FlatList는
보이는 영역 위주로만 렌더링한다.

• 화면에 안 보이는 아이템은 렌더링하지 않음
• 스크롤 위치에 따라 동적으로 생성/제거

그래서
ScrollView보다 기본 성능은 훨씬 좋다.

하지만
설정을 안 하면 반쪽짜리 성능이 된다.

---

FlatList 성능 최적화의 핵심 포인트

FlatList 최적화는
아래 항목들이 거의 전부다.

1. keyExtractor
2. renderItem 분리
3. React.memo
4. getItemLayout
5. windowSize / initialNumToRender

[이미지: FlatList 렌더링 영역 개념]

---

1️⃣ keyExtractor는 필수다

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

왜 중요한가

• 각 아이템을 구분하는 기준
• 잘못되면 불필요한 리렌더링 발생
• index를 key로 쓰면 문제 생길 가능성 큼

항상 고유한 id 사용이 기본 원칙이다.

---

2️⃣ renderItem은 반드시 컴포넌트로 분리

❌ 나쁜 예

<FlatList
  renderItem={({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  )}
/>

✅ 좋은 예

const Item = ({ item }) => {
  return <Text>{item.title}</Text>;
};

<FlatList
  renderItem={({ item }) => <Item item={item} />}
/>

이렇게 분리해야
memo, callback 최적화가 가능해진다.

---

3️⃣ React.memo로 아이템 렌더링 최소화

const Item = React.memo(({ item }) => {
  return <Text>{item.title}</Text>;
});

• props가 바뀌지 않으면
• 해당 아이템은 리렌더링되지 않는다

리스트 성능 최적화의
체감 효과가 가장 큰 단계다.

---

4️⃣ getItemLayout – 고정 높이라면 꼭 쓰자

리스트 아이템 높이가 항상 동일하다면,
이 옵션은 거의 필수다.

<FlatList
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

효과

• 스크롤 위치 계산 최적화
• jumpToIndex 성능 향상
• 초기 렌더링 속도 개선

⚠️ 아이템 높이가 가변적이면 쓰면 안 된다

---

5️⃣ initialNumToRender

처음 화면에
몇 개의 아이템을 렌더링할지 정한다.

<FlatList initialNumToRender={10} />

• 너무 크면 → 초기 로딩 느림
• 너무 작으면 → 첫 스크롤 시 끊김

보통은
화면에 보이는 개수 + 여유분 정도가 적당하다.

---

6️⃣ windowSize – 렌더링 버퍼 조절

<FlatList windowSize={5} />

• 현재 화면 기준으로
• 앞뒤 몇 화면 분량을 렌더링할지 결정

값이 클수록 부드럽지만 메모리 사용 증가
값이 작을수록 가볍지만 스크롤 시 끊길 수 있다.

---

자주 겪는 FlatList 성능 문제들

실무에서 정말 많이 본 케이스다.

• keyExtractor에 index 사용
• renderItem 안에서 inline 함수 남발
• 모든 상태를 부모에서 관리
• 아이템 컴포넌트 분리 안 함

이 중 절반만 고쳐도
체감 성능이 확 달라진다.

---

FlatList 최적화 체크리스트

리스트가 느리다면
아래부터 하나씩 체크하면 된다.

• keyExtractor에 고유 id 사용
• Item 컴포넌트 분리
• React.memo 적용
• getItemLayout 적용 가능 여부
• initialNumToRender 조정
• windowSize 조정

---

실무 기준 한 줄 요약

FlatList 성능은
옵션보다 구조가 먼저다.

구조가 정리되지 않으면
옵션을 아무리 만져도 한계가 있다.

---

정리

• FlatList는 기본적으로 빠르다
• 하지만 설정을 안 하면 성능이 쉽게 떨어진다
• keyExtractor와 컴포넌트 분리가 최우선이다
• getItemLayout은 고정 높이일 때 강력하다
• 옵션은 마지막 미세 조정 단계다

다음 글에서는
이미지 많은 앱에서 자주 겪는 문제인
이미지 최적화와 캐싱 전략을
React Native 기준으로 정리해보려고 한다.

---