Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- CSS
- 야놀자
- DFS
- js
- 백준
- 알고리즘
- 프론트엔드개발자
- 컴퓨터과학
- 국비지원
- github
- cpu
- 코딩테스트
- 호이스팅
- computerscience
- 너비우선탐색
- CS
- Javascript
- git
- LinkSnap
- 코테
- 그리디
- 패스트캠퍼스
- BFS
- KAKAO
- 국비지원취업
- 자바스크립트
- nodejs
- 컴퓨터공학
- html/css/js
- 부트캠프
Archives
- Today
- Total
My Boundary As Much As I Experienced
React Native) FlatList란? 본문
스크롤이 있는 화면을 만들 때 무엇을 써야하는가?
아래처럼 리엑트 네이티브로 스크롤 뷰를 만들 때 어떤 컴포넌트를 써야될까?
물론 처음 생각나는 건 ScrollView이다.
그러나 스크롤뷰의 큰 단점이 있는데, 뷰포트에 안 보이는 것까지 모두 다 렌더링 하는 컴포넌트라는 것이다.
그래서 서버에서 데이터를 몇십개를 가져오거나, 무한 스크롤로 계속 추가된다면 성능 상으로 매우 안 좋아진다.
FlatList가 더 나은 점
이를 보완하는게 FlatList이다. flatList를 쓰면 뷰포트 내에 있는 컴포넌트만 보이게 된다.
React Windowing 기법이 적용되었다고 보면 되려나..? 최적화가 더욱 잘 된 느낌이다.
FlatList 사용법
을 알아보기 전에 일단 ScrollView로 구현한 것을 보고가자.
일반적인 리액트 패턴이다. 서버에서 받아온 배열을 뿌려주는 패턴이다.
...
return (
// scrollView는 수많은 컴포넌트를 뷰포트에 나와있지 않아도 다 렌더하기 때문에 성능에 좋지 않다.
<ScrollView style={styles.flatList}>
{orders.map(item => (
<View style={styles.orderContainer}>
<Pressable onPress={toggleDetail} style={styles.info}>
<Text style={styles.eachInfo}>
<Text key={item.orderId}>{item.orderId}</Text>
</Text>
</Pressable>
</View>
))}
</ScrollView>
);
}
그러나 FlatList를 사용한다면, 굳이 이렇게 return부를 길게 쓰지 않아도 괜찮다.
FlatList의 필수 속성
data: 실제 활용할 데이터이다.
keyExtractor: (map메소드로 순회할 때 key가 필요하듯이) key를 추출하여 돌린다.
renderItem: 내용을 담을 컴포넌트이다. 미리 만들어서 뿌리면 된다.
return (
// scrollView는 수많은 컴포넌트를 뷰포트에 나와있지 않아도 다 렌더하기 때문에 성능에 좋지 않다.
<FlatList
data={orders}
keyExtractor={item => item.orderId}
renderItem={renderItem}
style={styles.flatList}
/>
);
}
렌더 아이템은 아래처럼 callback 함수로 반환하는 형식으로 만들면 된다. 이를 renderItem에 넣어준다.
const renderItem = useCallback(({item}: {item: Order}) => {
return (
<View style={styles.orderContainer}>
<Pressable onPress={toggleDetail} style={styles.info}>
<Text style={styles.eachInfo}>
<Text key={item.orderId}>{item.orderId}</Text>
</Text>
</Pressable>
</View>
);
}, []);
return (
// scrollView는 수많은 컴포넌트를 뷰포트에 나와있지 않아도 다 렌더하기 때문에 성능에 좋지 않다.
<FlatList
data={orders}
keyExtractor={item => item.orderId}
renderItem={renderItem}
style={styles.flatList}
/>
);
}
'FrontEnd > React Native' 카테고리의 다른 글
ReactNative) 이놈의 flipper... 그냥 안 써버릴려면 어떻게 해야되나? (2) | 2024.06.22 |
---|---|
ReactNative) 스타일시트를 props로 활용하는 방법 (StyleProp<T>) (0) | 2024.06.04 |
ReactNative) unable to boot the simulator 에러 해결법 (0) | 2024.05.30 |
ReactNative) React Native Config로 환경변수 설정 (0) | 2024.05.29 |
ReactNative) React Navigation으로 라우터 초기 세팅하기 (0) | 2024.05.29 |