[Flutter] ListView vs ListView.builder

popolarburr·2023년 9월 25일

문득 강의를 듣다 ListView와 ListView.builder의 차이점이 궁금해졌다 .

// ListView 방식
return MainLayout(
        title: 'ListViewScreen',
        body: ListView(
          children: numbers
              .map((e) => renderContainer(
                  color: rainbowColors[e % rainbowColors.length], index: e))
              .toList(),
        ));


VS

// ListView.builder 방식
return MainLayout(
      title: 'ListViewScreen',
      body: ListView.builder(
        itemBuilder: (context, index) {
          return renderContainer(
            color: rainbowColors[index % rainbowColors.length],
            index: index,
          );
        },
      ),
    );

1. ListView.builder 사용 vs. ListView 사용:

첫 번째 코드는 간단한 정적 리스트를 위해 ListView를 사용합니다.

ListView는 리스트의 모든 항목을 미리 지정된 children 속성을 통해 생성합니다. 이 방법은 정적인 내용을 표시하는 데 유용합니다.

두 번째 코드는 ListView.builder를 사용하여 리스트 뷰를 만듭니다.

ListView.builder는 항목을 생성할 때 필요한 내용을 빌드 함수(itemBuilder)를 통해 동적으로 생성합니다. 이것은 대규모 데이터 목록과 함께 사용하기에 효율적입니다.

2. 데이터 소스 차이

첫 번째 코드는 기본적으로 비슷한 결과를 생성하며, renderContainer 함수를 사용하여 각 항목을 표시합니다.

선택은 사용 사례 및 데이터의 특성에 따라 달라질 수 있으며, 동적인 리스트를 만들어야 하는 경우 ListView.builder가 더 효율적일 수 있습니다. 반면에 정적인 리스트를 만들어야 하는 경우 ListView를 사용하는 것이 간단하고 효과적일 수 있습니다.

두 번째 코드는 ListView.builder를 사용하며, renderContainer를 데이터와 함께 반복 호출하여 각 항목을 렌더링합니다.

데이터의 크기나 개수에 따라 동적으로 항목을 생성할 수 있으므로 대규모 목록에 적합합니다.
두 번째 코드는 ListView를 사용하며, 데이터 목록(numbers)의 각 항목을 루프를 통해 renderContainer에 전달하여 정적인 리스트를 만듭니다.

3. 렌더링 방식

첫 번째 코드는 SingleChildScrollView처럼 모든 리소스를 한번에 빌드하고 렌더링 해놓는다.

디스플레이나 화면에 보이지 않더라도 해당하는 모든 리소스들을 한번에 렌더링합니다.

두 번째 코드는 builder를 사용하기 때문에, 렌더링되는 양을 화면에 보여지는것만 렌더링한다.

무슨 말이냐, 어떠한 크기로 한 화면에 컨테이너가 3개밖에 보이지 않는다면 보이는 3개 앞뒤로 조금씩만 렌더링한다 . 또한 아래로 내려갈때도 올라갈때도 미리 렌더링 했었던 위젯들을 다시 렌더링하는 것을 볼 수 있는데, 이는 화면밖으로 벗어나면 위젯을 삭제하고 메모리에서 삭제해버린다는 의미를 갖습니다.
그렇기 때문에 속도 측면이나 메모리 측면에서도 유리하다고 볼 수 있습니다 .