레이아웃 컨테이너

Jetpack Compose는 UI 구성요소를 구조화하고 정렬하는 데 도움이 되는 여러 레이아웃 컨테이너를 제공합니다. Row 및 Column와 같은 기본 레이아웃 컴포저블은 간단한 정렬을 처리하지만, 많은 앱은 화면 크기가 변경되고 사용자 데이터가 증가함에 따라 더 반응성이 뛰어나고 적응성이 높은 컨테이너 솔루션을 필요로 합니다.

레이아웃 컨테이너에는 다음이 포함됩니다.

• 지연 목록 및 지연 그리드: 현재 표시 영역에 표시되는 항목만 구성하고 배치하여 크거나 동적으로 크기가 지정된 데이터 세트를 효율적으로 표시하는 LazyColumn, LazyRow, LazyVerticalGrid와 같은 구성요소입니다.
• 페이저: 사용자가 콘텐츠 페이지 간에 스와이프하거나 스크롤할 수 있는 HorizontalPager 및 VerticalPager와 같은 컨테이너입니다.
• 흐름 레이아웃: 공간이 부족할 때 넘치는 항목을 다음 행이나 열로 자동으로 래핑하는 반응형 1차원 컨테이너(FlowRow 및 FlowColumn)입니다.
• 그리드: 컨테이너 크기에 맞게 조정되는 다중 열 또는 다중 행 레이아웃으로 항목을 표시하는 유연한 2차원 구조입니다.
• FlexBox: CSS Flexbox에서 영감을 받은 적응형 컨테이너로, 항목이 기본축과 교차축을 따라 줄바꿈, 확장, 축소, 정렬되어 사용 가능한 공간을 채우는 방식을 세부적으로 제어할 수 있습니다.

올바른 레이아웃 컨테이너 선택

Compose에서 레이아웃을 빌드할 때 기본 레이아웃 컨테이너와 고급 레이아웃 컨테이너 중 무엇을 선택할지는 디자인, 공간이 제한될 때 항목을 줄바꿈해야 하는지 여부, 항목의 크기가 동적으로 조절되는 방식에 따라 달라집니다.

다음 표에는 각 Compose 1D 레이아웃 컨테이너의 기능이 요약되어 있습니다.

컨테이너	항목을 새 줄로 줄바꿈	항목별 증가	항목별 축소	항목별 시작 크기	여러 줄에서 사용 가능한 공간을 채우도록 항목이 늘어남	항목 재정렬하기	지연 로드	권장 용도:
행 / 열	❌	✅ (weight를 통해) 한 줄만	❌	❌	❌	❌	❌	적은 수의 고정된 항목이 있는 균일한 행입니다. 항목이 사용 가능한 범위 내에 맞고 여러 줄에 걸쳐 줄바꿈할 필요가 없습니다.
FlowRow / FlowColumn	✅	제한됨	❌	❌	일부	❌	❌	FlexBox로 대체되었습니다.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	성능 최적화를 위해 표시되는 항목만 렌더링해야 하는 길거나 무한한 항목 목록 한 방향으로 스크롤되는 동적 또는 대규모 데이터 세트
FlexBox	✅	✅	✅	✅	✅	✅	❌	초기 크기 지정, 동적 항목 증가/축소 (grow/shrink), 시각적 재정렬 (order), 항목 수준 교차축 정렬 (alignSelf)과 같은 적응형 기능이 필요한 레이아웃 다양한 크기의 항목 정렬

다음 표에는 Grid 및 기타 유사한 컴포저블의 기능이 요약되어 있습니다.

컨테이너	엄격한 2D 정렬	항목 확장 (열)	항목 확장 (행)	지연 로드	권장 용도:
그리드	✅	✅(GridArea를 통해)	✅	❌	모든 항목이 화면에 표시되고 명시적인 가로 및 세로 정렬이 필요한 구조적 2차원 레이아웃입니다. 화면 크기에 따라 레이아웃을 적응형으로 재구성합니다.
LazyVerticalGrid	✅	✅(span를 통해)	❌	✅	세로 스크롤 피드 및 열이 필요한 대규모 카탈로그
LazyStaggeredGrid	❌ (1D만 해당)	부분 (전체 기간만)	❌	✅	높이가 혼합된 항목이 있는 스크롤 피드
LazyHorizontalGrid	✅	❌	✅	✅	가로 스크롤 캐러셀 또는 여러 행으로 페이지가 매겨진 데이터
행과 열 결합하기	❌	❌	❌	❌	아이콘 옆에 텍스트 라벨을 배치하는 것과 같은 간단한 구성요소 조립