이 섹션에서는 요소와 데이터를 포함하고 자식 요소의 반응 동작을 제어하는 데 사용할 수 있는 그룹에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
그룹은 가장 기본적인 컨테이너 유형입니다. 페이지 어디에나 배치할 수 있으며 다른 컨테이너 내부에도 배치할 수 있습니다.
그룹은 다른 요소를 구성하거나 (스타일링하여) 데이터를 전달하는 데 사용될 수 있습니다.
그룹은 다양한 조건 및 사용자 작업에 따라 표시되고 숨겨질 수 있습니다. 다른 페이지로 이동하지 않고도 사용자가 앱을 탐색할 수 있도록 다른 요소를 포함하는 그룹을 숨기고 표시함으로써 구현할 수 있습니다. 그룹이 숨겨지면 높이와 너비를 축소하여 다른 그룹이 표시되도록 할 수 있습니다. 사용자에게는 전환이 즉각적으로 보이며 페이지의 내용이 지연이나 깜박임 없이 변경되는 것처럼 보입니다.
아래 예제처럼 그룹은 요소를 포괄할 수 있습니다.
Using groups for navigation
그룹은 다양한 조건과 사용자 작업에 따라 표시되거나 숨길 수 있습니다. 다른 요소를 포함하는 그룹을 숨기고 표시함으로써 사용자가 다른 페이지로 이동하지 않고도 앱을 탐색하게 할 수 있습니다.
그룹이 숨겨지면 높이와 너비를 축소하여 다른 그룹이 표시되도록 할 수 있습니다. 사용자에게는 전환이 즉각적으로 이루어지며 페이지의 콘텐츠가 지연이나 깜박임 없이 변경된 것처럼 보입니다.
아래 애니메이션에서는 그룹 A 및 그룹 B의 가시성을 토글하고 있습니다. 결과적으로 파란색 그룹이 높이를 축소 함에 따라 하나가 다른 것으로 대체됩니다. 이것이 사용자가 페이지를 다시 로드하지 않고도 페이지의 다른 섹션을 방문할 수 있는 단일 페이지 응용 프로그램(SPA)을 구축하는 방법입니다.
그룹을 숨기고 표시하는 두 가지 방법이 있습니다: 조건(Conditions)과 작업(Actions).
Using conditions
첫 번째 방법은 특정 기준이 충족되는지 확인하는 조건을 그룹에 설정하는 것입니다. 사용자 탐색을 제어하는 일반적인 방법은 조건을 URL 매개변수와 함께 사용하는 것입니다.
위 조건에서는 URL에 있는 navigation 매개변수를 확인합니다. 매개변수의 값이 edit user인 경우 해당 요소가 표시됩니다.
Using actions
그룹을 숨기고 표시하는 두 번째 방법은 작업을 사용하는 것입니다. Toggle an element 작업을 사용하여 즉시 그룹을 표시/숨기거나 Animate an element 작업을 사용하여 애니메이션을 적용할 수 있습니다.
Other ways to learn
Core reference: group settings
