ListView로 데이터 리스트로 그리기

ListView는 Flutter에서 스크롤 가능한 목록을 만들기 위해 가장 많이 사용되는 위젯 중 하나이다. ListView는 여러 개의 항목을 세로로 나열하며, 사용자 상호작용 시 스크롤을 통해 콘텐츠를 탐색할 수 있도록 해준다.

ListView의 기본 사용법

ListView는 기본적으로 Column 위젯과 비슷하게 작동하지만, 스크롤 기능이 내장되어 있어 많은 양의 데이터나 UI 요소를 표시할 때 유용하다. 예제를 통해 기본적인 ListView의 사용법을 살펴보자.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Example')),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }
}

ListView의 종류

ListView는 데이터를 효율적으로 표시하기 위해 여러 가지 생성 방법을 제공한다. 대표적으로 다음과 같은 네 가지 방식이 있다.

1. ListView():

   • 모든 항목을 한 번에 렌더링하여 작은 리스트에 적합하다.
   • children 속성에 모든 위젯을 직접 나열한다.
   • 예제:

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

2. ListView.builder():

   • 대량의 데이터를 처리할 때 효율적인 방식이다.
   • 항목이 스크롤될 때마다 동적으로 항목을 생성한다.
   • itemBuilder 콜백을 사용해 항목을 생성하므로 성능이 뛰어나다.
   • 예제:

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

3. ListView.separated():

   • 항목 사이에 구분선을 삽입할 때 사용한다.
   • itemBuilder와 separatorBuilder 두 개의 콜백을 통해 리스트 항목과 구분선 각각을 정의한다.
   • 예제:

     ListView.separated(
       itemCount: 10,
       itemBuilder: (context, index) {
         return ListTile(
           title: Text('Item $index'),
         );
       },
       separatorBuilder: (context, index) => Divider(),
     )

4. ListView.custom():

   • 커스터마이징이 필요한 경우 사용한다.
   • 고급 사용 사례에서 사용되며, SliverChildDelegate를 통해 항목을 제어한다.
   • 일반적으로 특수한 요구사항이 있을 때 유용하다.

ListView의 주요 속성

• scrollDirection: 스크롤 방향을 지정한다. 기본값은 세로(Axis.vertical)이지만, 가로(Axis.horizontal)로도 설정할 수 있다.
• shrinkWrap: ListView의 크기를 자식 항목에 맞게 줄여준다. 주로 ListView가 Column 또는 SingleChildScrollView와 함께 사용될 때 유용하다.
• physics: 스크롤 동작을 제어하는 데 사용된다. 예를 들어, NeverScrollableScrollPhysics로 설정하면 스크롤을 비활성화할 수 있다.

ListView의 장점

1. 효율적인 메모리 관리: ListView.builder()와 같은 메서드는 필요한 항목만 동적으로 렌더링하므로 메모리 사용량을 줄일 수 있다.
2. 간단한 구현: 많은 수의 항목을 쉽게 나열하고 스크롤 가능한 목록을 만드는 것이 간단하다.
3. 유연성: 다양한 생성 메서드와 속성을 통해 커스터마이징이 가능하다.

ListView의 단점

1. 과도한 아이템 렌더링: 기본 ListView() 사용 시 모든 항목이 한 번에 렌더링되므로 데이터가 많을 경우 성능 저하가 발생할 수 있다.
2. Nested ListView 문제: ListView가 다른 스크롤 가능한 위젯 내부에 중첩되면 스크롤 동작이 예기치 않게 작동할 수 있다. 이 경우 shrinkWrap 및 physics 속성을 조정해야 할 수 있다.

Best Practices

• 대량의 데이터를 처리할 때는 항상 ListView.builder() 사용: 메모리 효율성과 성능을 최적화하기 위해.
• 고정된 크기의 리스트 항목이 있을 경우 사용하기: itemExtent 속성을 사용하여 성능을 개선할 수 있다.
• Nested Scroll View 사용: 중첩된 스크롤이 필요할 때는 SingleChildScrollView나 NestedScrollView와 함께 사용하는 것이 좋다.

ListView는 Flutter 앱에서 데이터를 표시하고 사용자와 상호작용할 수 있는 매우 강력하고 유연한 도구이다. 올바르게 사용하면 성능이 뛰어나고 스크롤 가능한 사용자 경험을 제공할 수 있다.