[Flutter] 목록을 표시하는 Widget <ListView & GridView>

✅ ListView 와 GridView 정의

ListView

✔ ListView는 스크롤 가능한 리스트 형태의 UI를 제공하는 위젯입니다.
수직 방향(기본값) 으로 아이템을 배치하며, 동적인 리스트를 만들 때 사용됩니다.

GridView

✔ GridView는 격자(Grid) 형태로 아이템을 배치하는 스크롤 가능한 위젯입니다.
행(Row)과 열(Column)로 이루어진 레이아웃을 쉽게 만들 수 있습니다.

✅ ListView

📌 특징

🔹리스트 형태로 아이템을 나열 (기본적으로 수직)
🔹ListView.builder()를 사용하면 동적 리스트 구현 가능
🔹내부에 Column을 사용하는 것보다 성능이 좋음 (자동 스크롤 지원)
🔹무한 스크롤, 데이터 리스트 표현에 적합

✅ ListView.builder()란?

🔹동적으로 리스트 아이템을 생성하는 ListView
🔹itemCount 만큼 리스트를 렌더링 (무한 스크롤 가능)
🔹itemBuilder에서 개별 아이템을 동적으로 생성
🔹스크롤 시 화면에 보이는 항목만 렌더링 (메모리 절약)

📌 속성

속성	설명
itemCount	리스트의 총 아이템 개수
itemBuilder	개별 리스트 아이템을 생성하는 함수
separatorBuilder	아이템 사이에 구분선을 추가하는 함수 (ListView.separated에서 사용)
scrollDirection	스크롤 방향 설정 (Axis.vertical, Axis.horizontal)
shrinkWrap	부모 위젯 크기에 맞춰 리스트 크기 조절

🎯 ListView vs ListView.builder() 차이점

비교 항목	ListView	ListView.builder()
아이템 생성 방식	모든 아이템을 한 번에 렌더링	필요한 아이템만 동적으로 생성
렌더링 방식	초기 로딩 시 모든 위젯을 메모리에 저장	스크롤할 때만 아이템을 생성 (메모리 절약)
성능 최적화	아이템 개수가 많아지면 성능 저하	아이템이 많아도 최적화됨
사용 예시	리스트 크기가 작을 때	리스트 크기가 클 때 (예: 채팅, 뉴스 피드)

📌 ListView 예제

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

🔹ListView는 모든 아이템을 한 번에 메모리에 로드
🔹아이템 개수가 많으면 성능 저하 발생

📌 ListView.builder() 예제

ListView.builder(
  itemCount: 1000, // 1000개의 아이템 생성 가능
  itemBuilder: (context, index) {
    return ListTile(title: Text("Item $index"));
  },
)

🔹ListView.builder()는 보이는 아이템만 동적으로 생성
🔹성능이 뛰어나 무한 스크롤이 필요한 앱에서 유용

✅ GridView

📌 특징

🔹그리드 형태(2x2, 3x3 등)로 아이템 배치
🔹GridView.builder()를 사용하면 동적인 그리드 리스트 구현 가능
🔹crossAxisCount 속성을 활용해 컬럼 개수를 조절
🔹갤러리, 상품 목록 등 격자형 UI에 적합

✅ GridView.builder()란?

🔹동적으로 그리드(격자) 형태의 아이템을 생성하는 GridView
🔹SliverGridDelegateWithFixedCrossAxisCount로 열 개수(crossAxisCount)를 설정
🔹스크롤 시 화면에 보이는 항목만 렌더링 (메모리 절약)
🔹갤러리, 상품 목록 등에 적합

📌 속성

속성	설명
gridDelegate	그리드 레이아웃을 정의
crossAxisCount	한 줄에 표시할 열(Column) 개수
mainAxisSpacing	아이템 간 수직 간격
crossAxisSpacing	아이템 간 수평 간격
childAspectRatio	가로/세로 비율 (1.0이면 정사각형)
itemCount	전체 아이템 개수
itemBuilder	개별 아이템을 동적으로 생성하는 함수

🎯 GridView vs GridView.builder() 차이점

비교 항목	GridView	GridView.builder()
아이템 생성 방식	모든 아이템을 한 번에 렌더링	필요한 아이템만 동적으로 생성
렌더링 방식	초기 로딩 시 모든 위젯을 메모리에 저장	스크롤할 때만 아이템을 생성 (메모리 절약)
성능 최적화	아이템 개수가 많아지면 성능 저하	아이템이 많아도 최적화됨
사용 예시	리스트 크기가 작을 때	리스트 크기가 클 때 (예: 갤러리, 상품 목록)

📌 GridView.count() 예제

GridView.count(
  crossAxisCount: 2, // 2열 그리드
  children: [
    Container(color: Colors.red, height: 100),
    Container(color: Colors.blue, height: 100),
    Container(color: Colors.green, height: 100),
    Container(color: Colors.yellow, height: 100),
  ],
)

🔹GridView.count()는 모든 아이템을 초기 로딩 시 한 번에 렌더링
🔹아이템 개수가 많아지면 성능 저하 발생

📌 GridView.builder() 예제

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 3열 그리드
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemCount: 1000, // 1000개의 아이템
  itemBuilder: (context, index) {
    return Container(
      color: Colors.orange,
      child: Center(child: Text("Item $index")),
    );
  },
)

🔹GridView.builder()는 스크롤 시 보이는 아이템만 생성하여 메모리 절약
🔹이미지 갤러리, 상품 목록처럼 아이템 개수가 많을 때 적합

🎯 주요 속성 비교 (ListView vs GridView)

속성	ListView	GridView
기본 레이아웃	세로(수직) 리스트	행과 열(그리드)
항목 배치 방식	한 줄씩 배치	여러 열을 사용하여 배치
스크롤 방향	기본값: 수직 (scrollDirection: Axis.vertical)	기본값: 수직 (scrollDirection: Axis.vertical)
동적 아이템 추가	ListView.builder() 사용	GridView.builder() 사용
아이템 개수 조절	자동 배치 (한 줄씩)	crossAxisCount 속성으로 열 개수 조절
사용 예시	채팅 목록, 뉴스 피드, 댓글 목록	이미지 갤러리, 상품 목록, 카드형 UI

💡 언제 ListView 쓰고, 언제 GridView 써야 할까?

✅ ListView 사용 추천: 🔹 세로형 리스트를 만들고 싶을 때 🔹 채팅 앱, 뉴스 피드, 댓글 목록 등 스크롤 가능한 단일 열 데이터

✅ GridView 사용 추천:
🔹그리드(격자) 형식의 UI가 필요할 때
🔹이미지 갤러리, 상품 목록, 카드형 UI 등 여러 개의 아이템을 효과적으로 배치할 때

🔥 N줄 요약

🔹ListView → 세로(수직) 리스트, 아이템을 한 줄씩 배치, 채팅 목록·뉴스 피드 등 사용
🔹GridView → 행과 열(그리드) 형태 배치, 갤러리·상품 목록 등에 적합
🔹ListView.builder() → 동적 리스트 생성 (스크롤 최적화)
🔹GridView.builder() → 동적 그리드 생성 (레이아웃 최적화)
🔹ListView는 자동 배치, GridView는 crossAxisCount로 열 개수 조절
🔹단순 리스트는 ListView, 격자형 UI는 GridView 사용