[React Native] VirtualizedLists should never be nested inside plain ScrollViews with the same orientation... 해결

jiveloper·2022년 12월 10일

React Native

목록 보기

4/13

🆘 😕 에러명

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation 
because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

❓ 🧐 원인

ScrollView와 FlatList를 중첩 사용하여 발생

먼저 ScrollView와 FlatList에 대해 알아보고, 둘을 중첩 사용하면 안 되는 이유에 대해 설명드리겠습니다!

ScrollView와 FlatList란? 🧐

ScrollView

여러 구성 요소와 보기를 포함할 수 있는 일반 스크롤 컨테이너

FlatList

가장 편리한 기능을 지원하는 기본 플랫 목록을 렌더링 하기 위한 고성능 인터페이스

간단히 ScrollView와 FlatList의 장단점을 비교해보자면 다음과 같습니다. 🙂

데이터의 양에 따라 ScrollView나 FlatList를 적절히 사용하면 됩니다!

그렇다면, 이러한 ScrollView와 FlatList를 왜 중첩해서 사용하면 안 될까요? 🙄

ScrollView는 데이터의 양에 따라 높이가 동적으로 변하는 특징을 갖고 있습니다.

ScrollView와 FlatList가 같은 방향으로 쓰인다고 가정할 때,
ScrollView의 자식 요소를 한 번에 렌더링 하는 특성 + FlatList의 필요한 데이터만 렌더링 하는 특성이 만나면, 기기의 현재 화면에서 필요한 데이터와 필요하지 않은 데이터를 동시에 불러오는 데이터 렌더링 중첩 상황이 발생합니다.

이렇게 되면 사실상 필요한 데이터만 렌더링 하는 FlatList의 특성이 무색해지죠. 😅
그래서 해당 error가 발생합니다.

error가 발생해도 화면 구동이 가능하지만, 비효율적인 방법인 것 같다는 게 제 의견입니다. :)

추가로

FlatList에는 스크롤이 가장 밑에 도착했을 때 필요한 부분을 다시 로드하는 'onEndReached'라는 속성이 있습니다. 마찬가지로 ScrollView와 FlatList가 같은 방향으로 쓰인다고 가정할 때, ScrollView 내부에 FlatList가 존재하면 (FlatList의 부모가 ScrollView이면) onEndReached가 호출되지 않습니다.