React-Native 개발일지 - [ 스크롤 ]

리액트 네이티브에서 스크롤 가능한 콘텐츠를 표시하는 것은 매우 중요한 작업입니다. 이를 위해 주로 사용되는 두 가지 컴포넌트가 바로 ScrollView와 FlatList입니다. 이 두 컴포넌트는 각각의 용도와 특징이 다르므로, 상황에 맞게 적절히 선택하여 사용하는 것이 중요합니다.

ScrollView

설명

ScrollView는 자식 컴포넌트를 수직 또는 수평으로 스크롤할 수 있게 해주는 컴포넌트입니다. 모든 자식 요소를 한 번에 메모리에 로드하기 때문에, 적은 수의 요소를 표시할 때 유용합니다.

특징

• 전체 렌더링: 모든 자식 요소를 한 번에 렌더링하므로, 요소의 수가 많으면 성능이 저하될 수 있습니다.
• 스크롤 방향: 스크롤 방향을 제어할 수 있으며, 수직(horizontal={false}) 또는 수평(horizontal={true}) 스크롤이 가능합니다.
• 복잡한 레이아웃: 내부에 여러 개의 컴포넌트를 포함할 수 있어 복잡한 레이아웃을 구현하기에 적합합니다.

사용 예제

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

const MyScrollView = () => {
  return (
    <ScrollView>
      <View><Text>첫 번째 항목</Text></View>
      <View><Text>두 번째 항목</Text></View>
      <View><Text>세 번째 항목</Text></View>
      {/* 추가 항목들... */}
    </ScrollView>
  );
};

FlatList

설명

FlatList는 대량의 데이터 리스트를 효율적으로 표시하기 위한 컴포넌트입니다. 필요한 데이터만 메모리에 로드하여 성능을 최적화합니다.

특징

성능 최적화: 데이터가 많을 때 성능이 뛰어나며, 스크롤할 때 필요한 항목만 렌더링합니다.
데이터 관리: data와 renderItem 프로퍼티를 사용하여 데이터를 쉽게 관리할 수 있습니다.
유연한 구성: 목록의 헤더나 푸터, 아이템 분리기 등의 추가적인 기능을 제공하여 리스트 구성에 유연성을 더합니다.
고유 키 관리: keyExtractor를 사용하여 각 항목에 고유한 키를 할당할 수 있습니다.
사용 예제
javascript

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

const DATA = \[  
  { id: '1', title: '첫 번째 항목' },  
  { id: '2', title: '두 번째 항목' },  
  { id: '3', title: '세 번째 항목' },  
  // 추가 항목들...  
\];  

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

요약

ScrollView는 소수의 컴포넌트를 스크롤할 때 적합하며, 모든 요소를 한 번에 렌더링합니다. 복잡한 레이아웃을 구현할 수 있지만, 요소가 많을 경우 성능 저하가 우려됩니다.
FlatList는 대량의 데이터를 효율적으로 표시하며, 필요한 데이터만 렌더링하여 성능을 최적화합니다. 리스트 구성에 대한 유연성과 성능을 모두 갖춘 훌륭한 선택입니다.
리액트 네이티브에서 적절한 스크롤 컴포넌트를 선택하여 사용자 경험을 개선해 보세요!