개발 창고

[React Native] FlashList로 리스트의 렌더링 성능 최적화하기

들어가며시대생 서비스의 도서관 예약하기 서비스는 아래 이미지처럼 도서관 현재 좌석 상태를 표시합니다.해당 서비스의 좌석 item을 표시하기 위해 보통 18 x 30 크기의 이차원 배열을 이중 리스트로 렌더링합니다. 이를 구현하기 위해 리스트의 렌더링 성능을 최적화하기 위해 공식문서에서 제시하는 FlatList를 사용하고, getItemLayout prop을 이용하여 구현했습니다. ({ length: itemWidth + 2, offset: (itemWidth + 2) * index, index, })}>하지만 해당 방법을 이용하더라도, 아래와 같이 시뮬레이터 및 실 기기에서 여전히 느린 렌더링 성능을 보여주었습니다.또한 예약 페이지가 넘어가기 전에 버튼이 잠깐 멈춘듯하는 현상과, 렌더링..