react-native

React Native 스크롤 처리 정리: ScrollView와 FlatList 차이와 선택 기준

mirabo01 2026. 1. 17. 09:52

화면에 내용이 조금만 늘어나면
바로 이런 상황을 마주친다.

  • 화면 아래가 잘려서 안 보인다
  • 리스트를 만들었는데 스크롤이 안 된다
  • ScrollView로 했더니 느려진다

React Native에서
스크롤은 기본이 아니다.
명시적으로 컴포넌트를 선택해야 한다.

이 글에서는
ScrollView와 FlatList의 차이와 사용 기준을
실무에서 헷갈리지 않게 정리한다.

이 글이 필요한 사람

  • 화면이 길어졌는데 스크롤이 안 되는 경우
  • ScrollView와 FlatList 차이를 잘 모르는 경우
  • 리스트 성능 이슈가 걱정되는 경우

React Native에서 스크롤이 필요한 이유

React Native의 View는
스크롤 기능이 없다.

콘텐츠가 화면을 넘어가면
그냥 잘린다.

그래서 스크롤이 필요한 화면에서는
반드시 전용 컴포넌트를 사용해야 한다.

  • ScrollView
  • FlatList

[이미지: React Native 스크롤 컴포넌트 개념 비교]

ScrollView란 무엇인가

ScrollView는
전체 내용을 한 번에 렌더링하는 스크롤 컨테이너다.

import { ScrollView, Text } from 'react-native';

<ScrollView>
  <Text>내용 1</Text>
  <Text>내용 2</Text>
  <Text>내용 3</Text>
</ScrollView>

ScrollView 특징

  • 내부 콘텐츠를 전부 렌더링
  • 사용법이 단순함
  • 짧은 콘텐츠에 적합

언제 쓰면 좋을까

  • 설정 화면
  • 약관 페이지
  • 고정된 길이의 설명 화면

화면에 보이지 않는 내용까지
전부 메모리에 올린다는 점은 꼭 기억해야 한다.

ScrollView에서 자주 하는 실수

❌ View에 스크롤을 기대하는 경우

<View>
  {/* 아무리 길어도 스크롤 안 됨 */}
</View>

❌ ScrollView 안에 또 ScrollView를 넣는 경우

  • 스크롤 충돌 발생
  • 제어가 어려워짐

ScrollView는
한 화면에 하나가 기본 원칙이다.

FlatList란 무엇인가

FlatList는
리스트 전용 스크롤 컴포넌트다.

import { FlatList, Text } from 'react-native';

const data = [
  { id: '1', title: '아이템 1' },
  { id: '2', title: '아이템 2' },
];

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

FlatList 특징

  • 필요한 아이템만 렌더링
  • 스크롤 성능이 좋음
  • 데이터 기반 렌더링

리스트가 조금이라도 길다면
ScrollView 대신 FlatList가 정답이다.

FlatList에서 꼭 알아야 할 props

data

렌더링할 배열 데이터

renderItem

각 아이템을 어떻게 그릴지 정의

keyExtractor

각 아이템의 고유 key 지정

keyExtractor={(item) => item.id}

이걸 안 주면
경고 메시지가 계속 나온다.

ScrollView vs FlatList 차이 정리

구분ScrollViewFlatList

렌더링 방식 전체 렌더링 필요한 만큼만
성능 리스트에 불리 대량 데이터에 유리
사용 난이도 쉬움 조금 더 복잡
적합한 경우 짧은 화면 목록 화면

기준은 하나다.
데이터가 배열이면 FlatList를 먼저 고려한다.

FlatList가 어색하게 느껴지는 이유

처음엔 이런 느낌이 든다.

  • JSX가 아니라 설정하는 느낌
  • renderItem 문법이 낯설다

하지만 실제 앱에서는
리스트 화면이 훨씬 많다.

  • 피드
  • 상품 목록
  • 알림 리스트

그래서
FlatList에 익숙해지는 게 훨씬 중요하다.

실무에서 자주 겪는 문제

  • ScrollView로 리스트 만들었다가 성능 저하
  • FlatList에 flex 스타일 안 줘서 화면이 안 나옴
  • keyExtractor 누락

이 중 대부분은
**“언제 뭘 써야 하는지”**를 몰라서 생긴다.

정리

  • View에는 스크롤이 없다
  • ScrollView는 짧은 화면용
  • FlatList는 리스트 전용
  • 데이터 기반 UI는 FlatList가 기본이다

다음 글에서는
사용자 입력을 처리하는 컴포넌트인
TextInput과 Button / Pressable을 정리해보려고 한다.