목록표시 UI

학습목표

• 목록 표시 UI에 대해 이해하고 사용할 수 있다.
• Column(Row)과 LazyColumn(LazyRow)의 차이를 알고 사용할 수 있다.
• ViewModel과 함께 LazyColumn을 사용할 수 있다.
• Card를 이해하고 사용할 수 있다.

목록 표시 UI - Column/Row

• 여러 항목을 나열하는 UI로 Column이나 Row를 사용할 수 있음
• 항목이 많아서 스크롤이 필요한 경우 Modifier.verticalScroll()을 사용

목록 표시 UI - LazyColumn/LazyRow

• 많은 수의 항목이나 길이를 알 수 없는 목록을 표시해야 하는 경우
  Column(또는 Row)을 사용하면 모든 항목이 무조건 컴포지션되고 배치되므로
  성능 문제가 발생 (화면에 보이지 않더라도 컴포지션됨)

• 화면에 표시되는 항목만 컴포지션하여 배치하는 방법
  LazyColumn(또는 LazyRow)

• LazyColmun/LazyRow에서 항목을 추가하는 함수
  item(): 한 항목만 추가
  items(): 여러 항목 추가
  itemsIndexed(): 여러 항목을 추가할 때, 인덱스 번호도 알 수 있음

• Column으로 만든 목록 표시를 LazyColumn으로 변경

• • 스크롤은 넣을 필요 없음. 알아서 스크롤 동작함
• • 기본적으로 항목의 표시되는 위치에 따라 key를 지정하는데,
    항목이 추가되거나 삭제되면 항목 위치와 key가 달라지게 됨
    따라서 항목과 key를 지정해주는 것이 좋음
    key는 항목의 고유 id같은 것으로 지정함

• 내부 컨텐츠 여백
  contentPadding
verticalArrangement

Card

• 단일 콘텐츠 표시를 위한 컨테이너. Column/Row와 함께 사용
• 일관된 단일 콘텐츠 표시
• • 쇼핑 앱의 제품
• • 뉴스 앱의 뉴스 기사
• • 커뮤니케이션 앱의 메시지