[SwiftUI] List에 대한 기본기 이해하기

안녕하세요! 피피아노입니다🎵

 

이번 포스팅에서는 SwiftUI에서 사용하는 List에 대해서 정말정말 간단하게!! 포스팅을 하도록 하겠습니다!

 

그럼 바로 시작하겠습니다!

 

SwiftUI List

먼저 List에 대해서 공부하기 전에 List 뷰가 뭔지부터 알아야 하는데 List뷰는 여러분들이 아이폰을 사용한다면 정말 많이 봤을 겁니다.

제가 간단하게 List뷰를 사용해서 어떻게 생긴 건지 한 번 살펴보겠습니다.

 

바로 이게 List 뷰입니다! 많이 익숙하죠?

 

SwiftUI에서 List뷰는 수직 방향의 목록 형태로 사용자에게 정보를 제공하는 방법을 제공합니다. 리스트 항목은 일반적으로 사용자가 터치했을 때 앱의 다른 영역으로 이동하게 됩니다. 이런 액션은 NavigationStack 컴포넌트와 NavigationLink 컴포넌트를 사용해서 구현하는데 일단은 List에 집중해서 살펴보겠습니다.

 

SwiftUI의 List 컨트롤은 셀(cell)에 포함된 하나 이상의 뷰의 각 행을 수직 방향의 목록으로 정보를 표현하는 UIKit의 TableView 클래스와 비슷한 기능을 제공합니다.

 

조금 더 쉽게 말해서 SwiftUI의 List는 UITableView의 SwiftUI 버전으로 생각하시면 됩니다!

 

List는 일련의 행을 세로로 배열한 목록을 표시하고 각 행은 데이터의 개별 항목을 나타냅니다. List는 정적 또는 동적 데이터 모델 모두에 사용할 수 있으며, 사용자 정의 셀을 통해 다양한 레이아웃과 스타일을 구현할 수 있습니다.

 

리스트 셀은 단 하나의 컴포넌트만 있어야 한다는 제약은 없습니다. 그렇기 때문에 여러 컴포넌트를 조합해서 셀에 표시할 수 있죠!

만약 내가 이미지와 텍스트 컨포넌트를 HStack으로 조합해서 리스트를 구성하고 싶다면 아래처럼 소스 코드를 작성하면 됩니다!

 

리스트 구분자 및 행 수정하기

List뷰에서는 행을 구분하기 위해 선(line)을 사용합니다. 이 선은 listRowSepartor() 수정자를 셀 콘텐트 뷰에 적용해서 숨길 수 있습니다.

그리고 만약에 '내가 만드는 앱은 선에 색이 적용 됐으면 좋겠어!' 라고 생각한다면 listRowSepartorTint()를 사용해서 선의 색상을 변경할 수도 있습니다. 그리고 listRowBackground() 수정자를 사용해서 뷰가 행의 배경으로 표시되도록 할당하는 것도 가능합니다!

 

정리하자면!

listRowSepartor() - 리스트 구분 선 숨기기

listRowSepartorTint() - 리스트 구분 선 색상 변경하기

listRowBackground() - 행의 배경을 뷰로 표시하기

 

이렇게 됩니다! 간단하죠?

 

첫 번째 선은 숨기고 두 번째 선은 빨간색으로 바꾸고 마지막 행에 배경 이미지를 표시하는 모습의 리스트를 코드에 적용해보자면 아래처럼 작성할 수 있습니다! 

이 List 뷰를 동적 리스트로도 만들 수 있는데 내용이 길어질 것 같으니 추가적인 내용은 다음 포스팅에서 이어서 정리하도록 하겠습니다!

 

감사합니다!

 

잘못된 내용이 있거나 더 좋은 내용 피드백은 언제나 환영합니다!

궁금하신 부분은 댓글로 질문 부탁드립니다!