변수로 페이지와 레이아웃 상태 제어

레이아웃에 변수를 연결하면 사용자 선택, 객체 속성과 함수 결과에 따라 화면 상태를 정할 수 있습니다. 페이지 선택, 섹션의 표시와 접힘, 탭 선택 및 overlay의 열림 상태가 대상입니다.

상태별 값과 이벤트

대상	변수와 값	일반 레이아웃 이벤트의 변수 갱신
페이지	String 값이 Page ID와 일치하는 페이지를 선택합니다.	Switch to page는 연결 변수를 갱신하지 않습니다.
섹션 가시성	기본적으로 Boolean true이면 숨기고 false이면 표시합니다. 반대로 설정할 수 있습니다.	가시성을 바꾸는 별도 이벤트는 없으며 Set variable value를 사용합니다.
섹션 접힘	Boolean true이면 접고 false이면 펼칩니다.	Expand, Collapse와 Toggle은 연결 변수를 갱신하지 않습니다.
Overlay	Boolean true이면 열고 false이면 닫습니다.	Open과 Close도 연결 변수를 갱신합니다.
선택 탭	String 값이 Tab ID와 일치하는 탭을 선택합니다.	탭 선택과 Switch to tab 이벤트 모두 연결 변수를 갱신합니다.

URL로 특정 페이지를 열거나, 사용자 동작과 부모 모듈의 interface 변수로 이동할 페이지를 지정할 수 있습니다.

Routing을 켰다면 페이지 선택 변수의 기본값을 비워 둡니다. URL이 초기값을 공급하는데 기본값을 설정하면 처음 렌더링할 때 그 값이 URL 입력을 덮어씁니다.

Switch to page 이벤트는 화면을 바꾸지만 이 변수를 갱신하지 않습니다. 화면과 변수값을 같이 유지하려면 Set variable value를 사용합니다.

섹션을 선택하고 Conditional Visibility를 켭니다. Hide section if에서 Boolean 변수를 선택합니다. 기본값은 true일 때 숨기는 동작이며, 변수 선택 오른쪽의 Boolean 선택기로 false일 때 숨기도록 바꿀 수 있습니다.

숨긴 섹션은 레이아웃에 나타나지 않습니다. 가시성을 바꾸는 전용 이벤트는 제공하지 않으므로 Set variable value로 조건값을 바꿉니다.

섹션을 선택하고 Collapsible을 켠 뒤 Variable-backed collapse state에 Boolean 변수를 지정합니다. true이면 접고 false이면 펼칩니다.

접힌 섹션은 header가 남아 사용자가 다시 펼칠 수 있습니다. 관련 데이터가 있을 때 펼치거나 여러 섹션의 상태를 맞추는 데 사용할 수 있습니다.

Expand, Collapse와 Toggle 이벤트는 연결한 Boolean 값을 바꾸지 않습니다. 변수값도 상태와 맞추려면 Set variable value를 사용합니다. 숨긴 상태와 접힌 상태의 차이는 화면 구성 선택에서 설명합니다.

Overlay를 선택하고 Variable-backed open state에 Boolean 변수를 연결합니다. true이면 열고 false이면 닫습니다.

Overlay를 여닫는 레이아웃 이벤트는 이 변수도 바꿉니다. On close 이벤트를 추가하여 상위 조건 변수를 초기화하거나 닫힌 뒤 필요한 동작을 실행할 수 있습니다.

부모 모듈에서 overlay를 제어하거나 여러 overlay의 상태를 맞출 때 모듈 interface로 공유한 값을 사용할 수 있습니다.

탭 컨테이너에서 Variable-backed tab selection에 String 변수를 지정하고 탭마다 고유한 Tab ID를 정합니다. 변수값을 바꾸면 해당 탭을 선택하고 사용자가 탭을 선택해도 변수값을 바꿉니다.

Switch to tab 이벤트도 연결 변수를 갱신합니다. 여러 탭 컨테이너의 선택을 맞추거나 module interface와 URL로 선택값을 전달하고, 다른 화면 조작에 따라 탭을 바꾸는 데 사용할 수 있습니다.

이벤트의 순차 실행은 파생 변수의 계산 완료를 기다리지 않습니다. 계산한 조건으로 레이아웃을 바꾸는 경우에는 재계산 시점을 함께 구성합니다.