[Flutter]ListView, ListView.builder, SingleChildScrollView + Column 차이점

	ListView	ListView.builder	SingleChildScrollView + Column
렌더링 방식	모든 아이템 한번에 생성	화면에 보이는 것만 생성 (Lazy Loading)	모든 자식 한번에 생성
메모리 효율	❌ 낮음	✅ 매우 높음	❌ 낮음
성능	⚠️ 아이템 많으면 느림	✅ 아이템 많아도 빠름	❌ 자식 많으면 느림
사용 시점	적은 고정 아이템 (< 20개)	많은 아이템 (20개 이상)	복잡한 레이아웃, 스크롤 필요한 전체 화면
아이템 개수	고정적	동적 가능	고정적
재사용성	❌ 없음	✅ 위젯 재사용	❌ 없음
빌드 타이밍	한번에 모두	필요할 때만	한번에 모두
스크롤 범위	자동 계산	자동 계산	자식 크기 기반
메모리 사용	아이템 × 위젯 크기	화면에 보이는 것만	모든 자식 × 위젯 크기
권장 사용 케이스	메뉴, 설정 목록	채팅, 피드, 무한 스크롤	폼, 상세 페이지, 프로필

---

 

ListView와 ListView.builder의 차이점은 ListvView는 모든 아이템을 한번에 생성하고 ListView.builder는 화면에 보이는 아이템만 필요할때(화면에 보일때) 지연생성한다는 점에서 차이가 있다.

따라서 ListView는 소량의 고정아이템에 적합하고 ListVIew.builder는 대량의 데이터나 무한스크롤에 적합하다.

예를들어 1000개의 아이템이 있다면 Listview는 모든 1000개의 아이템을 메모리에 올리지만, Listview.builder는 화면에 보이는 부분만 10-15개 생성하고 스크롤하면서 위젯을 재사용 할 수있어서 성능 최적화에 좋다.

 

SingleChildScrollView + Column은 ListView와 달리 아이템이 고정되어있고, 각 섹션이 서로 다른 타입의 위젯으로 구성된 복잡한 레이아웃에 사용한다.

예를들면 프로필 화면처럼 상단 이미지,중간카드, 하단버튼이 있을때 적합하다. 하지만 자식이 많으면 메모리성능에 좋지 않으므로 주의해야한다. 따라서 소량의 고정컨텐츠에 용이하다.

 

ListView

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
    // ... 100개라면 100개 모두 생성됨!
  ],
)

---

ListView.builder 

ListView.builder(
  itemCount: 1000,  // 1000개여도 괜찮음!
  itemBuilder: (context, index) {
    // 화면에 보이는 것만 생성
    return ListTile(title: Text('Item $index'));
  },
)

 

SingleChildScrollView + Column

SingleChildScrollView(
  child: Column(
    children: [
      HeaderWidget(),      // 다른 타입
      ImageCarousel(),     // 다른 타입
      InfoCard(),          // 다른 타입
      ButtonGroup(),       // 다른 타입
      // 모든 자식이 한번에 생성됨
    ],
  ),
)

성능 비교 

시나리오: 1000개 아이템 렌더링

ListView:
- 초기 빌드: 1000개 위젯 생성 → 느림 🐌
- 메모리: 1000개 × 위젯 크기 → 많음 💾
- 스크롤: 모두 생성되어 있음 → 보통 ⚡

ListView.builder:
- 초기 빌드: 10-15개만 생성 → 빠름 🚀
- 메모리: 10-15개 × 위젯 크기 → 적음 💾
- 스크롤: 필요할 때 생성 → 매우 빠름 ⚡⚡

SingleChildScrollView + Column:
- 초기 빌드: 1000개 위젯 생성 → 매우 느림 🐌🐌
- 메모리: 1000개 × 위젯 크기 → 매우 많음 💾💾
- 스크롤: 모두 생성되어 있음 → 느림 ⚡

---

 

ListView.builder에서 itemExtent를 사용하는 이유는 itemExtent를 사용하면 각 아이템의 높이를 미리 알 수 있어 전체 스크롤 범위를 정확하게 계산할수있다. 이는 성능향상과 스크롤바 위치표시에 도움이 된다.

 

ListView.builder(
  itemCount: 1000,
  itemExtent: 60.0,  // 각 아이템 높이 고정
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

 

---

 ListView.separated는 아이템 사이에 구분선이나 간격이 필요할때 사용한다. Listview.builder와 동일한 성능을 가지면서 자동으로 구분자를 삽입해준다.

ListView.separated(
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  separatorBuilder: (context, index) => Divider(),  // 구분선 자동 추가
)

 

---

CustomScrollView는 여러 스크롤 가능한 위젯(SliverList,Slivergrid 등)을 하나의 스크롤 영역에 결합할떄 사용한다.

---

 

 

요약하자면 ListView는 모든 아이템을 한번에 생성하고, ListView.builder는 화면에 보이는 것만 생성해서 메모리 효율적입니다. 실무에서는 대부분 ListView.builder를 사용하고, 복잡한 레이아웃은 SingleChildScrollView + Column을 쓴다.

예제

// ❌ 잘못된 예 (성능 문제)
ListView(
  children: List.generate(1000, (index) {
    return ExpensiveWidget(index: index);  // 1000개 모두 생성!
  }),
)

// ✅ 올바른 예 (최적화)
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ExpensiveWidget(index: index);  // 필요한 것만 생성
  },
)

// ✅ 복잡한 레이아웃 (올바른 사용)
SingleChildScrollView(
  child: Column(
    children: [
      HeaderSection(),
      if (user.isPremium) PremiumBanner(),
      ContentSection(),
      FooterSection(),
    ],
  ),
)