본문 바로가기

카테고리 없음

[Flutter.250115] ListView와 ListView.builder의 차이

리스트를 만들 때 사용된다는 공통점이 있지만, ListView와 ListView.builder 사이에는 차이점이 있다.

ListView 같은 경우는 리스트를 한번에 만들어버리기 때문에, 만들어야 할 리스트의 양이 많으면 버벅이는 현상이 발생할 수 있다.

반면에 ListView.builder 같은 경우는 visible, 딱 보이는 양 부터 만들고, 요청이 오는 것에 따라 리스트 아이템을 만들어서 보여주기 때문에, 앞서 말한 많은 양의 리스트를 만들어야 하는 상황에 적합하다.

 

공식 문서에도 다음과 같은 표현으로 설명되어 있다. (https://api.flutter.dev/flutter/widgets/ListView-class.html)

 

더보기

The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

 

둘의 차이를 간단히 표로 정리해 보면 다음과 같다. 

 

특징 ListView ListView.builder
데이터 크기 작거나 고정된 데이터에 적합 데이터 양이 많거나 동적인 데이터의 경우에 적합
렌더링 방식 모든 아이템을 한 번에 생성 필요할 때 동적으로 생성 (처음에는 화면에 보여지는 아이템만 렌더링되고, 스크롤하면 나머지 아이템이 동적으로 생성됨)
성능 데이터 사이즈가 큰 경우 메모리 비효율적 메모리 효율적
구현 복잡성 간단 itemBuilder를 사용

 

 

구현 복잡성 측면에서, 상대적으로 덜 간단하다 뿐이지, ListView.builder도 쓰기 간편하다.

각각의 코드 구현 예시는 다음과 같다.

 

ListView.builder

ListView.builder(
  itemCount: 1000, // 총 1000개의 아이템
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

 

ListView

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

 

 

^_^ 끝