React Native 캘린더 성능 개선

안녕하세요, 여러분!
앞선 게시글로 달력을 만들었었는데 문제가 생겨서 어떻게 인식하고 해결했는지에 대한 이야기를 공유하려고 합니다.

문제 인식

원했던 화면이 그려지기는 했지만 로딩 되는데에 매우 오래걸리는 문제가 있었습니다.
성능 모니터링 툴로 확인을 해보니 3.3s가 걸리는 것을 확인할 수 있었습니다.

구글 리서치 자료에 따르면 모바일 웹 사이트의 로딩 시간이 3초 이상일 때 32%, 5초 이상은 90%, 6초 이상은 106% 마지막으로 10초가 넘으면 123%의 이탈률이 발생한다고 합니다.

우리는 아무것도 안했는데 벌써 유저 32%를 잃었습니다!!
지금은 빈 달력뿐이지만 나중에 일정, 애니메이션 등등 추가가 된다면 렌더링 시간은 더 늘어날 것입니다.

개선 방법

React Native에는 List를 표현하는 방법으로 ScrollView / FlatList / SectionList 를 이용하여 구현할 수 있습니다. 보통은 FlatList를 이용하여 작업을 많이 하게 됩니다.

React Natvie에서 List 최적화 방법이 많은데, 공식문서에서도 FlatList의 최적화 방법을 소개하고 있습니다.

하지만, 성능이 좋지 못한 폰에서는 리스트가 버벅거리는 현상이 있었습니다. 그렇게 해서 레퍼런스를 찾다가 발견한 List가 recyclerListView입니다.

recyclerListView는 성능의 이점은 있지만 사용법이 복잡하고 제대로 갱신이 되지 않는 버그를 가지고 있습니다.

그렇게 찾아보다 알게된 라이브러리가 FlashList입니다.
FlashList는 내부적으로 recyclerListView를 가지고 있지만, 사용법이 FlatList와 같아 React Native의 FlatList를 사용해본 사람이라면 쉽게 구현할 수 있는 구조를 가지고 있습니다.

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlashList // 변경
        ... 기존 코드
        estimatedItemSize={width} // 추가
      />
    </SafeAreaView>
  );
};

개선 결과

기존 3.3초였던 렌더링 속도가 1.2초로 단축된 것을 확인 할 수 있습니다.
약 63% 단축 된 결과를 얻었습니다!

이런 접근 방식을 통해 표시 성능을 최적화하면서도 보기 좋은 캘린더를 만들 수 있습니다.

마무리

성능 모니터링 툴을 이용해 성능개선을 해보니 도구나 기법에 더더욱 관심이 생기게 되었습니다. 도구를 더 잘쓰게 된다면 얻는 이점이 많다는 것을 알 수 있었습니다. 관심갖고 학습하여 더 나은 프로젝트를 만드는데 큰 도움이 되었습니다.