React Native에서 "VirtualizedLists should never be nested" 에러 해결 방법

목차

1. 문제 원인

2. 해결 방법

3. 권장 사항

 

---

React Native에서 FlatList를 사용해 목록을 구현하던 중 아래와 같은 에러를 만난 경험이 있으신가요?

 

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. [Component Stack]

 

이 오류는 VirtualizedList와 관련된 기본적인 사용 규칙을 위반했을 때 발생합니다. 아래에서 이 문제의 원인과 해결 방법을 단계별로 알아보겠습니다.

---

1. 문제 원인

이 에러는 FlatList나 VirtualizedList 같은 VirtualizedList 기반 컴포넌트를 일반 ScrollView 안에 중첩하여 사용할 때 발생합니다.

React Native에서 VirtualizedList는 자체적으로 스크롤 동작을 처리하도록 설계되어 있습니다. 하지만 일반 ScrollView와 함께 사용되면 스크롤 동작 간 충돌이 발생하며, 성능 문제와 예상치 못한 동작을 유발할 수 있습니다.

2. 해결 방법

이 문제를 해결하려면 ScrollView를 제거하거나, 올바른 VirtualizedList를 사용하는 방식으로 수정해야 합니다.

2-1. FlatList만 사용하기

가장 좋은 해결책은 ScrollView를 제거하고, FlatList를 단독으로 사용하는 것입니다. FlatList는 스크롤 가능한 목록을 자체적으로 처리하므로, 별도의 ScrollView가 필요하지 않습니다.

예시 코드: FlatList 사용

...
const Papers = ({papers}) => {
  return (
    <FlatList
      data={papers}
      renderItem={({item}) => <PapersItem paperId={item.paperId} />}
      keyExtractor={item => `papers-${item.paperId}`}
      ListFooterComponent={<View style={{height: 50}} />}
      contentContainerStyle={{paddingBottom: 20}}
    />
  );
};
...

 

이 방법은 스크롤 동작의 충돌을 방지하며, 많은 데이터에서도 효율적으로 작동합니다.

2-2. ScrollView만 사용하기

FlatList의 특성이 필요하지 않고, 데이터의 양이 적다면 ScrollView로 대체하는 것도 가능합니다. 그러나 데이터가 많아질 경우 성능이 저하될 수 있으므로, 이 방법은 소규모 데이터에만 적합합니다.

 

 

3. 권장 사항

React Native에서 목록을 다룰 때는 FlatList를 단독으로 사용하는 것을 권장합니다. 이는 다음과 같은 이유 때문입니다:

• 성능 최적화: FlatList는 필요할 때만 화면에 요소를 렌더링하는 "가상화" 방식을 사용하여 성능을 극대화합니다.
• 기능 내장: 스크롤, 헤더, 푸터, 섹션 분리 등 목록에서 필요한 대부분의 기능을 기본적으로 제공합니다.

 

 

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.