혼자 공부하면서 정리한 글입니다. 오류가 있다면 알려주시길 바랍니다 🙇🏻
책을 읽으면서 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 옵션- default 값은 21이다. 현재 스크린을 기준으로 앞으로 10배, 뒤로 10배를 추가로 랜더링한다는 의미.
- 현재 스크린이 10개면 앞으로 100개, 뒤로 100개. 초기 랜더링에는 앞쪽 데이터가 없으니 총 110개가 된다.
extraData: 해당 데이터가 변경시에 FlatList가 다시 랜더링된다.- FlatList의
renderItem은state나props가 갱신되어도 다시 랜더링하지 않는다.
- FlatList의
numColumns: 리스트를 여러열로 보여준다.onEndReached: 특정 시점에 도달하면 지정한 함수를 실행한다.onEndReachedThreshold:onEndReached를 호출할 시점을 정한다.
등.. 더 많은 props는 공식 문서에서...
그 외 사용 가능한 메서드들도 있다.
scrollToEnd(): FlatList의 가장 끝부분으로 이동하는 함수scrollToIndex(): FlatList의 원하는 index로 이동하는 함수srcollToIndex({animated: bollean, index: number})index대신에viewOffset(number),viewPosition(number)사용가능- viewOffset(number) : 원하는 픽셀로 이동하는 함수
- viewPosition(0 ~ 1) : 최상단(0) ~ 최하단(1)중 지정한 위치로 이동하는 함수
이러한 기능들이 있어서 map보다 FlatList를 권장하는 것 같다.
물론 상황에 따라 데이터에 크기에 따라 map과 성능 차이가 느껴지지 않을 수도 있다!
최적화 하는 방법도 추후에 작성해보겠다.
참고하여 작성했습니다.
[ReactNative 공식문서] FlatList
FlatList vs map react-native - stackoverflow
React-Native FlatList에 대해 알아보자 - djaxornwkd12
[react native] 제대로 사용하기 - codingbroker
React-Native FlatList - daesiker
