[react-native] react-native-draggable-flatlist 모든 아이템이 렌더링되지 않는 이슈

문제 상황

react-native-draggable-flatlist 라이브러리를 사용하는데 해당 데이터가 모두 잘 넘어옴에도 불구하고,
renderItem에서 item을 사용하려고 하면 모든 아이템이 렌더되지 않는 상황이 발생했다.

ex) the FlatList does not render all 100 items on initial load.

 

 

 

 

 

 

해결 과정

하나하나 디버깅을 해보자.

item을 찍어봤을 때 처음에는 반 정도 렌더링이 되고, 드래그를 하니 나머지 아이템이 렌더링 되는 상황을 목격했다.

음, 이건 해당 라이브러리 문제라고 생각해서 해당 라이브러리 이슈를 살펴보았다.

 

역시 나랑 똑같은 문제를 겪고 있는 사람이 있었다.

해당 이슈: https://github.com/computerjazz/react-native-draggable-flatlist/issues/453

Performance Issue on long lists · Issue #453 · computerjazz/react-native-draggable-flatlist

 

 

 

 

문제 해결

처음 렌더링이 될 때 아이템의 갯수를 세팅해준다. 

해당 라이브러리에 initialNumToRender 속성을 사용하자.

initalNumToRender 속성

다시 확인해보면, 모든 아이템이 렌더링 되는 것을 확인할 수 있다.

뿌-듯 👍🏻