[React Native] FlatList중첩 사용시 오류(A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.)

ui를 만들다 보면 아래와 같이 Flatlist를 중첩해서 사용해야 할 때가 있다.

<FlatList
	...
	ListHeaderComponent={() => <FlatList />}
/>

 

이 경우 아래와 같은 오류가 발생한다.

A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

 

Item Key의 문제인줄 알았는데 FlatList에 listKey prop을 추가해주지 않아서 발생하는 오류였다.

<FlatList
	...
    listKey = {"list1"}
	ListHeaderComponent={() =>
        <FlatList
            ...
            listKey = {"list2"}
            ...
        />
    }
/>

 

즉, FlatList는 VirtualizedList를 사용하는데, 이들을 구분해줄 key가 없어서 발생하는 오류였다.