[Flutter] ListView.builder를 사용하는 이유

플러터를 사용해 리스트를 처음 구현했을 때 ListView.builder를 사용하라는 블로그 글을 통해 리스트를 구현했었다.
처음에는 "그냥 이렇게 구현하는건가 보다~"하고 넘어갔는데, 플러터 개발자로 취업을 하고, 정말 다양한 리스트 위젯을 구현하다보니 리스트를 구현하는 과정에서 다양한 방법이 있다는 것을 알게 됬다.

다양한 방법은 다음과 같았다.

• Column, Row 위젯을 SingleChildScrollView 위젯으로 감싸는 방법을 통해 구현하는 방법
• LisView 위젯을 통해 구현하는 방법
• ListView.builder를 통해 구현하는 방법

이 외에도 더 많은 방법이 있을 것 같지만 현재까지 내가 즉답으로 답할 수 있는 리스트를 구현하는 방법은 위의 3가지이다. 이 3가지 방법을 사용하다가 문득, 이런 생각이 들었다.

"보여지는 화면은 똑같은데, 왜 굳이 3가지 방법이 존재하는거지?"

그래서 인터넷을 뒤적거리며 조사를 하고, 이에대한 차이점을 공부했는데, 이 글을 보는 사람들은 검색을 수고로움을 덜 수 있도록 차이점을 작성하고자 한다.

SingleChildScrollView + Column(or Row)

• 장점
  • 위젯 리스트 요소 하나하나에 직접 간섭하기 쉽다.
  • 무작위 복잡한 위젯구조의 리스트를 구현할때 사용하면 좋다.
• 단점
  • 리스트 내의 모든 위젯을 모두 그린다. (성능 이슈가 생길 수 있다.)
  • Keyboard가 올라오고 내려올 때 적절한 조치를 취하지 않으면 원치 않는 UI 렌더가 발생하며 이로인해 렌더링 관련 이슈가 생길 수 있다.

ListView

• 장점
  • 리스트 UI를 구현하기 쉽다.
  • 리스트 UI를 구현하기 위한 다양한 옵션을 제공한다.
• 단점
  • 기본 사이즈가 무한대이기 때문에 사이즈를 지정해줘야한다.(SizedBox, Container, Expanded, Flexible 등으로 감싸면 된다.)
  • SingleChildScrollView + Column(or Row)와 마찬가지로, 리스트 내 모든 위젯을 한번에 그리기 때문에 성능 이슈가 있을 수 있다.

ListView.builer

• 장점
  • ListView의 장점을 모두 포함한다.
  • 추가적으로, ListView.builder는 화면에 보여지는 요소만 그린다. 이로 인해 수천, 수만 이상의 요소를 리스트로 만들어도 부담이 적다.
• 단점
  • 기본 사이즈가 무한대이기 때문에 ListView처럼 사이즈를 지정해줘야한다.

결론

• 우리가 리스트 UI를 구현할 때는 보통 같은 형태의 UI를 여러개 보여주기 위해 사용하는 경우가 대부분이다. 그런 점에서, ListView.builder는 손쉽게 리스트 UI를 구현할 수 있는(추가적으로 성능 최적화도 해주는!) 방법이라고 생각한다.