2023-09-19: FlatList에 Header 넣기 - ScrollView 속에 FlatList를 넣으면 안되는 이유

🚫 ScrollView와 FlatList는 같이 쓰면 안 된다.

이번에 구현하면서 미처 수정을 하지 못 했던 한 가지 이슈가 있다. QA에 등록되지 않았는데, 이건 기술적인 이슈였기 때문이다.

이번에 만든 프로젝트 관련으로 ScrollView 속에 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.

이렇게 하면 안 되는 이유는 스크롤을 생성해주는 ScrollView 영역에 스크롤을 이용할 수 있는 FlatList가 배치되면서 두 영역의 스크롤이 중첩되는 사항이 발생하기 때문이다.

물론, FlatList의 API에 scrollEnabled를 통해서 막아도 되긴 하지만 에러가 뜨는 걸 보면 안정적인 방법은 아니다.

❓ SectionList를 쓰면 되는 거 아닌가?

사실은 처음 SectionList를 쓰면 되겠지! 라고 생각했었는데, SectionList의 API는 아쉽게도 VirtualizedList의 API들을 다 지원해주면서도, FlatList의 API를 지원해주진 않는다.

SectionList를 이용하면 Header를 배치할 수 있다는 장점이 있지만, FlatList의 numColumns 기능이 지원되지 않는다.

이번에 구현하면서 numColumns의 기능이 되게 중요했기 때문에 어쩔 수 없이 SectionList를 사용하는 걸 포기했다.

이번에 찾아보면서 내가 놓쳤던 것이 있는데, 바로 ‘ListHeaderComponent’라는 것이었다. VirtualizedList 자체에서 지원해주는 기능인데, 단순히 SectionList에서만 Header 컴포넌트를 배치할 수 있을 거라는 안일한 생각을 했었다.