UI 로직 만들기

컴포넌트가 동작을 적용하거나 백엔드 시스템의 모의 데이터에 반응하여 복잡한 경험을 시뮬레이션할 수 있는 UI 로직을 추가하여 와이어프레임을 대화형 프로토타입으로 전환하세요.

컴포넌트 연결

UI 컴포넌트 간에 연결을 생성하여 서로 통신할 수 있도록 합니다. 예를 들어 마우스 클릭 시 버튼의 모양을 어떻게 변경하고 마우스 클릭 시 발생하는 신호에 따라 UI가 어떤 동작을 수행해야 하는지 등을 결정할 수 있습니다.

속성 별칭 및 상태 사용

프로퍼티를 함께 바인딩하여 UI 컴포넌트 간의 연결을 만들 수 있습니다. 이렇게 하면 부모 컴포넌트에서 속성 값이 변경되면 값의 변화를 나타내는 신호를 발생시켜 모든 자식 컴포넌트에서 자동으로 변경할 수 있습니다.

다른 컴포넌트에서 한 컴포넌트의 프로퍼티를 참조하려면 다른 프로퍼티에 대한 참조를 담고 있는 프로퍼티 별 칭을 만들 수 있습니다. 프로퍼티에 새롭고 고유한 저장 공간을 할당하는 일반적인 프로퍼티 정의와 달리, 프로퍼티 별칭은 새로 선언된 프로퍼티(별칭 프로퍼티)를 기존 프로퍼티( 앨리어싱된 프로퍼티)에 대한 직접 참조로 연결합니다. 데이터 기반 콘텐츠는 관련 컴포넌트의 공용 프로퍼티로 내보내야 합니다. 예를 들어 속도계에는 UI가 바인딩되는 속도에 대한 프로퍼티가 있어야 합니다.

기본 상태에서 프로퍼티 값이 어떻게 변하는지를 설명하는 다양한 UI 상태를 선언할 수 있습니다. 상태는 UI 로직을 구성하는 유용한 방법이 될 수 있습니다. 트랜지션을 컴포넌트와 연결하여 상태 변경으로 인해 프로퍼티가 변경될 때 해당 프로퍼티가 애니메이션되는 방식을 정의할 수 있습니다.

프로퍼티 별칭과 상태를 사용하여 컴포넌트 인스턴스의 차이점을 만들면 컴포넌트를 복제하는 대신 재사용할 수 있습니다. 따라서 컴포넌트를 완전히 새로운 컴포넌트 유형으로 처리할 필요가 없습니다. 따라서 로딩 및 컴파일 시간은 물론 최종 애플리케이션의 패키지 크기도 줄어듭니다.

UI 컨트롤 커스터마이징

사전 설정된 UI 컨트롤에는 수정할 수 있는 기본 속성과 상태가 있습니다. 추가 속성이 필요한 경우 컨트롤의 인스턴스를 사용자 지정 컴포넌트로 전환하고 새 속성을 지정할 수 있습니다.

표현식 작성

UI가 특정 연산을 수행하도록 하려면 조건에 대한 자바스크립트 표현식을 작성하거나 숫자를 문자열로 변환해야 할 수 있습니다. 예를 들어, 부울 연산자 AND, NOT, OR 연산자를 사용하여 속성 값을 바인딩하고 숫자 및 숫자 범위를 매핑할 수 있습니다. 또한 두 컴포넌트의 속성 값을 양방향으로 동기화할 수도 있습니다.

일반적인 사용 사례

다음 표에는 몇 가지 일반적인 사용 사례가 자세한 정보로 연결되는 링크와 함께 요약되어 있습니다.