Lazy Loading & ListView.builder

• Lazy Loading ( 지연 로딩 )

필요한 시점에 데이터를 불러오거나 객체를 생성하여 메모리와 자원을 효율적으로 사용하는 기법
즉, 한꺼번에 모든 데이터를 미리 준비하지 않고, 사용자가 필요로 할 때마다 점진적으로 처리하는 방식

 

특징

• 무거운 작업이나 데이터 로딩을 필요할 때만 수행
• 초기 로드 시간을 줄이고 메모리 사용을 최소화
• 스크롤이나 UI 인터랙션, 페이지네이션에 따라 점진적으로 데이터 또는 UI를 생성

 

ListView로 확인해보자

ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
    // 모든 아이템들을 한꺼번에 생성
  ],
)

 

리스트의 모든 아이템이 한 번에 모두 메모리에 생성된다

문제 > 작은 리스트에는 문제가 없지만, 아이템 수가 많아지면 비효율적이며 메모리 과다 사용 및 성능 저하가 발생한다.

 

ListView.builder ( Lazy Loading )

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item ${items[index]}'));
  },
)

 

itemBuilder 콜백 함수가 필요한 시점(화면에 보이는 아이템 위치)에만 호출되어 해당 아이템 위젯을 생성한다

즉, 화면에 보이는 일부 아이템만 메모리에 존재하며, 스크롤할 때마다 새로운 아이템만 동적으로 만들어진다.
> 리스트가 매우 크거나 무한 스크롤일 때 적합하며 메모리 효율이 뛰어나다