[react native] 제대로 사용하기

react native에서 많은 양의 데이터를 출력할 때에는 나 를 주로 사용합니다.

두 컴포넌트 모두 데이터가 화면을 벗어났을 때에 Scroll이 생성된다는 공통점이 있지만

사용 용도에는 조금 차이가 있습니다.

는 데이터가 화면을 벗어났을 때 단순히 Scroll을 생성하여 사용자와의 상호작용(swipe, 스와이프)을 통해 벗어난 부분을 볼 수 있게 해주는 데에 그 목적이 있습니다.

출력해야하는 데이터가 고정적이고 양이 많지 않을 때 간단하게 사용할 수 있는 컴포넌트입니다.

이에 반해 에는 더 많은 기능이 있습니다.

와 같이 데이터가 화면을 벗어났을 때 Scroll을 생성하지만

는 한번에 모든 데이터를 렌더링하지 않고 화면에 보여지는 부분(혹은 설정한 수만큼의 데이터)만 렌더링한다는 차이가 있습니다.

데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우(API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우)에 사용하기 적절한 컴포넌트입니다.

초기에는 화면에 적절한 양의 데이터만 렌더링한 뒤, 유저의 swipe작용에 의해서 Scroll이 움직일 때 필요한 부분을 추가적으로 렌더링하기 때문에 초기 렌더링 시 퍼포먼스 향상을 누릴 수 있습니다.

사용법

숫자 0부터 99까지를 요소로하는 배열을 를 사용해 렌더링하는 예제입니다.

App.js

import React from 'react'; import {ScrollView, FlatList} from 'react-native'; import Item from './Item'; const arr = []; for (let i = 0; i < 100; i++) { arr.push(i); } const App = () => { return ( item.toString()} data={arr} renderItem={({item}) => } /> ); }; export default App;

※ keyExtractor를 통해 각 요소를 구별해줍니다.

요소가 객체이고 key나 id를 이름으로하는 property가 존재하면(유니크해야합니다) 생략가능합니다.

각 요소를 출력하는 Item 컴포넌트입니다.

Item.js

import React from 'react'; import {StyleSheet, View, Text} from 'react-native'; const Item = ({num}) => { return ( {num} ); }; const styles = StyleSheet.create({ container: { borderBottomWidth: 1, height: 100, }, text: { textAlign: 'center', textAlignVertical: 'center', fontSize: 50, }, }); export default Item;

실행화면

Item 컴포넌트의 콘솔출력을 통해서 각 컴포넌트가 어떻게 렌더링되는지 확인해보겠습니다.

import React from 'react'; import {StyleSheet, View, Text} from 'react-native'; const Item = ({num}) => { console.log('Item', num); return ( {num} ); }; const styles = StyleSheet.create({ container: { borderBottomWidth: 1, height: 100, }, text: { textAlign: 'center', textAlignVertical: 'center', fontSize: 50, }, }); export default Item;

콘솔 출력

앱의 실행과 동시에 0부터 62까지의 숫자를 prop으로하는 Item 컴포넌트가 렌더링되었습니다.

화면에는 5까지밖에 없고, 숫자는 99까지 있는데 62라는 숫자가 나온 이유는

의 windowSize prop 때문입니다.

windowSize는 공식문서의 에는 나와있지 않지만

윗부분에 잘 찾아보면

This is a convenience wrapper around , and thus inherits its props that aren't explicitly listed here

라는 글과 함께 문서에 잘 설명되어 있습니다.

요약하자면 초기에 렌더링되는 스크린을 기준으로

앞뒤로 추가로 렌더링시킬 스크린의 수 설정해주는 prop입니다.

스크린 1개는 내부에 보여지는 화면을 의미합니다.

위의 실행결과에서는 0부터 5의 절반까지 약 5.5개의 컴포넌트가 렌더링되어있는 부분이 여기에서 말하는 스크린에 해당됩니다.

default 값은 21인데,

현재 스크린을 기준으로 앞으로 10개, 뒤로 10개를 추가로 렌더링한다는 의미입니다.

앞으로는 데이터가 없죠.

뒤로 10스크린을 추가로 렌더링하면 5.5개 x 10 =55개를 더 렌더링해서 최종적으로 62번 컴포넌트 언저리까지 렌더링되는 결과로 나타났습니다.

하지만 10개만큼의 screen을 초기에 렌더링하기에는 좀 부담스럽습니다.

windowSize를 2로 설정하고 다시한번 확인해보겠습니다.

item.toString()} data={arr} renderItem={({item}) => } windowSize={2} />

콘솔 출력

9까지 출력되면서 초기 렌더링 부담이 많이 줄었습니다.

마지막으로 해야할 작업이 있습니다.

현재 상태에서는 Scroll을 움직일 때마다 windowSize에 해당하는 모든 Item 컴포넌트를 불필요하게 재렌더링합니다.

React.memo()를 사용해서 이를 방지해줍니다.

export default React.memo(Item);

간단하게 Item 컴포넌트를 memo로 감싸서 export 시켜주면 됩니다.

이 밖에도 refreshing 기능이나 그에 따른 Loading의 구현 등

공식문서에서 확인할 수 있는 의 기능을 잘 활용하면 대용량의 데이터를 효율적으로 렌더링 할 수 있습니다.

https://facebook.github.io/react-native/docs/0.44/flatlist#__docusaurus

from http://codingbroker.tistory.com/110 by ccl(A) rewrite - 2020-03-06 07:54:30