[RN] React Native 스크롤 설정하기 (ScrollView와 FlatList)

 

ScrollView

컨테이너의 사용 가능한 공간을 넘어가면 스크롤 할 수 있어야하는데

웹에서는 공간을 넘어가면 기본으로 스크롤바가 나타나서 스크롤이 되지만, 모바일 앱은 그렇지 않다.

 

스크롤할 수 있게 만들려면 <ScrollView> 컴포넌트를 사용하면 된다.

import { ScrollView } from "react-native";

export default function HomeScreen() {
    return (
          <ScrollView></ScrollView>
    )
}

 

만약 원래 있던 View 대신 ScrollView를 사용한다면 스크롤은 되겠지만, 원래 있던 공간배치, 레이아웃이 달라지게 된다.

스크롤 가능한 영역은 부모 요소의 크기에 따라 결정되기 때문에 위에 View로 한 번 더 감싸줘서 부모의 높이를 설정하는 style을 적용하던가, 직접 ScrollView의 높이를 설정하는 방법. 예를 들어 style로 flex: 1을 준다면 ScrollView가 모든 사용 가능한 공간을 차지하기 때문에 그 안에서 스크롤이 가능한 영역을 형성할 수 있다.

 

ScrollView엔 다양한 props 옵션을 제공하는데

<ScrollView horizontal>{/* 수평 스크롤 */}</ScrollView>
<ScrollView showsVerticalScrollIndicator={false}>{/* 스크롤바 감추기 */}</ScrollView>
<ScrollView contentContainerStyle={{ padding: 20 }}>{/* 내용에 패딩 추가 */}</ScrollView>

 

외에도 정말 많으니 자세한 건 문서를 꼭 읽어보길 추천!

https://reactnative.dev/docs/scrollview

 

이렇게 콘텐츠에 스크롤을 추가할 땐 유용하지만 ScrollView의 단점이 있는데

ScrollView는 전체 UI가 렌더링 될 때마다 안에 있는 자식 항목을 전부 렌더링하기 때문에 현재 화면에서 보이지 않더라도

화면 뒤에선 계속 렌더링이 되고 있어 성능에 문제가 생길 수 있다.

그래서 끝이 정해진 콘텐츠 외에 무한 스크롤같은 동적 목록에는 ScrollView를 사용하지 않는다.

 

FlatList

위 같은 성능 저하를 피하고 싶으면 React Native에서 제공하는 <FlatList> 컴포넌트를 사용하면 된다.

FlatList는 스크롤 가능한 목록에 적용할 수 있는데 스크린에서 보이는 항목만 렌더링하고, 화면 밖의 항목 스크린에서 멀리 스크롤 되면 항목을 제거해서 메모리와 처리시간을 절약할 수 있다.

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

export default function HomeScreen() {
  const data = [
    { key: 'item1', title: 'Item 1', id: ..},
    { key: 'item2', title: 'Item 2', id: ..},
    ...
  ];

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

 

FlatList는 필수 prop이 두가지 있는데,

출력할 배열 데이터인 data와 각 데이터 항목을 렌더링 하는 함수인 renderItem을 지정해줘야한다.

 

이렇게만 설정하면 키가 누락됐다는 경고문이 뜨는데 FlatList에서 키를 추가하는 방법은 두가지가 있다.

첫번째는 위 코드 처럼 직접 data 객체에 key를 속성을 추가해서 고유 키로 설정하는 방법.

그렇게 하면 FlatList가 자동으로 key속성을 찾기 때문에 경고문이 뜨지 않는다.

두번째 데이터 객체에 직접 key 속성을 추가할 수 없는 경우 keyExtractor prop을 사용해서 각 항목에서 id같은 고유한 키를 추출하는 함수를 지정하면 된다.