혼자 공부하면서 정리한 글입니다. 오류가 있다면 알려주시길 바랍니다 🙇🏻
책을 읽으면서 TodoList를 랜더링 할 때 map()을 사용하는 부분이 있었다.
FlatList라는게 있는데 왜 얘를 쓰지?라는 생각에 차이점을 정리해봤다.
(아마 책 초반이라 간단한 예제를 만드느라 그런 것 같기도..)
map()
map()
메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 JavaScript 함수이다.
const array = [1, 2, 3, 4, 5];
const map1 = array.map((num) => num * 2);
console.log(map1); // Array [2, 4, 6, 8, 10]
react native에서 list에 쓰이는 map
은 보통 ScrollView
와 함께 쓰인다.
그럼 FlatList
와 거의 동일한 기능을 구현할 수 있다.
import React from 'react'
import { ScrollView } from 'react-native'
import Todo from './Todo'
const TodoList = ({todos}) => {
todos = dodos.map((todo, i) => {
return <Todo key={todo.idx} todo={todo} />
});
return (
<ScrollView>
{todos}
</ScrollView>
)
}
FlatList
쓰는건데?FlatList
는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 리액트 네이티브 컴포넌트이다.
모든 데이터를 로딩하지 않고 화면에 보여지는 부분(혹은 설정한 만큼)만 랜더링한다.
그렇기에 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없을 때 사용하기에 적절하다.
<FlatList
// required props
data={data.arr} // 리스트 소스
renderItem={({todo}) => <Todo todo={todo} />}
// 데이터를 item에 담아 랜더링하는 콜백함수
// props
horizontal // 리스트를 가로로
windowSize={5} // 로딩 item 현재 기준 앞뒤로 5배
keyExtractor={todo => todo.id} // item 고유 키
extraData = {seletedID} // selectedID가 변경되면 리랜더링 되도록 하는 속성
numColumns={2} // 리스트를 2열로
/>
horizontal
: 리스트를 가로로 만드는 속성 (defalut: false
) windowSize
: 로딩 item 옵션extraData
: 해당 데이터가 변경시에 FlatList가 다시 랜더링된다.renderItem
은 state
나 props
가 갱신되어도 다시 랜더링하지 않는다.numColumns
: 리스트를 여러열로 보여준다.onEndReached
: 특정 시점에 도달하면 지정한 함수를 실행한다.onEndReachedThreshold
: onEndReached
를 호출할 시점을 정한다.등.. 더 많은 props는 공식 문서에서...
그 외 사용 가능한 메서드들도 있다.
scrollToEnd()
: FlatList의 가장 끝부분으로 이동하는 함수scrollToIndex()
: FlatList의 원하는 index로 이동하는 함수srcollToIndex({animated: bollean, index: number})
index
대신에 viewOffset(number)
, viewPosition(number)
사용가능이러한 기능들이 있어서 map보다 FlatList를 권장하는 것 같다.
물론 상황에 따라 데이터에 크기에 따라 map과 성능 차이가 느껴지지 않을 수도 있다!
최적화 하는 방법도 추후에 작성해보겠다.
참고하여 작성했습니다.
[ReactNative 공식문서] FlatList
FlatList vs map react-native - stackoverflow
React-Native FlatList에 대해 알아보자 - djaxornwkd12
[react native] 제대로 사용하기 - codingbroker
React-Native FlatList - daesiker