이 섹션에서는 데이터베이스 레코드와 같은 항목 목록을 표시하는 데 사용되는 컨테이너 유형인 반복 그룹에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
동영상 강의
반복 그룹은 데이터베이스 레코드와 같은 항목 목록을 표시하기 위해 그룹의 내용을 각 항목에 대해 한 번씩 반복하는 데 사용되는 컨테이너 유형입니다.
이전 섹션(Groups)에서 살펴보았듯이 데이터를 로드하고 해당 데이터를 참조할 수 있도록 그룹을 구성할 수 있습니다. 반복 그룹도 동일한 방식으로 작동하지만 단일 레코드가 아니라 데이터 목록과 함께 작동하도록 설정됩니다.
예를 들어 앱에서 사용자 목록을 표시하고 이름 및 이메일 주소와 같은 정보를 포함하려면 해당 정보를 표시하는 반복 그룹에 텍스트 엘리먼트를 추가하면 해당 그룹의 내용이 목록의 사용자 수만큼 복제됩니다. 목록에 다섯 명의 사용자가 있다면 반복 그룹에 추가하는 모든 엘리먼트가 다섯 번 복제됩니다.
창의적인 방법으로 반복 그룹을 사용하여 데이터 목록의 유연한 목록을 설정하는 몇 가지 다른 방법을 살펴보겠습니다.
List Design
아래 예에서 반복 그룹이 작동하는 방법에 대한 몇 가지 주요 사항이 있습니다.
1.
콘텐츠의 유형을 사용자로 설정하여 반복 그룹이 사용자 목록을 데이터 소스로 허용하도록 했습니다.
2.
데이터 소스에서는 Do a search for 명령을 사용하여 사용자 목록을 로드하고 있습니다.
3.
반복 그룹 안에서 텍스트 엘리먼트가 한 행마다 한 번씩 반복되는 것을 볼 수 있습니다. 각 행을 셀이라고 합니다.
4.
현재 셀의 X를 포함한 표현식에서 각 셀의 사용자를 참조할 수 있습니다. 아래 예에서는 현재 사용자를 참조하여 사용자의 이름을 가져올 수 있습니다.
실제 앱에서 어떻게 보일지 살펴보겠습니다. Current cell의 User's Name을 참조하여 해당 셀에 로드된 사용자에 관한 정보를 표시할 수 있습니다.
Card Design
이전 예제에서 본 것처럼 반복 그룹은 CRM의 연락처 목록이나 제품 재고 시스템의 제품 목록과 같은 간단한 목록을 설정하는 데 사용될 수 있습니다.
그러나 제품 카드와 같이 목록을 다른 방식으로 디자인하는 데 강력하게 사용될 수도 있습니다.
이 예에서는 두 개의 셀을 가진 반복 그룹을 보여주고 있습니다. 이러한 셀 안에는 디자인을 완성하기 위해 Regular Groups 및 다른 엘리먼트를 결합하고 있습니다.
위 그림에서 그림자가 들어간 흰색 카드는 반복 그룹의 셀 안에 배치된 그룹(Groups)입니다. 우리는 그것을 흰색 배경, 둥근 모서리 및 그림자로 스타일링하고 이미지, 몇 가지 텍스트 엘리먼트 및 버튼을 배치하여 디자인을 완성했습니다.
Bubble Design Editor에서 엘리먼트를 살펴보면 각 엘리먼트가 부모 그룹의 데이터인 제품을 참조한다는 것을 볼 수 있습니다. 부모 그룹(그림자가 있는 그룹)은 다시 반복 그룹의 현재 셀을 참조합니다.
데이터베이스 관점에서 보면 보고 있는 제품에는 Name(텍스트), Price(숫자), Image(이미지) 및 Description(텍스트)과 같은 필드가 포함되어 있을 것이며 이러한 필드를 로드하여 반복 그룹의 각 셀에 표시할 수 있습니다.
이 예에서는 Product라는 데이터 유형을 설정하고 몇 가지 필드를 할당하여 반복 그룹의 각 셀에 표시할 수 있도록 했습니다.
Masonry Design
Bubble의 반응형 엔진을 사용하면 반복 그룹을 사용하여 완전히 반응형 masonry 디자인을 설정할 수 있습니다.
아래에서는 대화형 자습서를 시도해보거나 텍스트 버전을 확인할 수 있습니다.
마그네시 디자인을 사용하려면 몇 가지 단계를 완료해야 합니다.
1.
마그네시 레이아웃을 사용하려면 반응형 엔진을 사용해야 합니다.
2.
Repeating Group의 Property Editor에서 Set fixed number of rows 및 Stretch rows to fill vertical space 모두 선택 해제되어 있는지 확인합니다.
3.
Repeating Group의 스크롤 방향을 세로로 설정합니다.
4.
Display items as masonry grid 옵션을 선택합니다.
마그네시 그리드 설정이 완료되면 Row cell gap 및 Column cell gap 설정을 변경하여 각 셀 간의 간격을 픽셀 단위로 조정할 수 있습니다.
Other ways to learn
Core reference: repeating group settings
Video lessons and interactive demos
