UI 로직 구현

와이어프레임을 인터랙티브 프로토타입으로 전환하여, 컴포넌트가 액션을 적용하거나 백엔드 시스템의 모의 데이터에 반응하여 복잡한 사용자 경험을 시뮬레이션할 수 있도록 UI 로직을 추가하세요.

컴포넌트 연결

UI 컴포넌트 간에 연결을 생성하여 서로 통신할 수 있도록 하세요. 예를 들어, 마우스 클릭 시 버튼의 모양이 어떻게 바뀌어야 하는지, 그리고 마우스 클릭 시 발생되는 신호 에 대응하여 UI가 어떤 동작을 수행해야 하는지 등을 고려해야 합니다.

속성 별칭 및 상태 사용

UI 컴포넌트 간의 속성을 서로 바인딩하여 연결을 생성할 수 있습니다. 이렇게 하면 상위 컴포넌트에서 속성 값이 변경될 때, 값 변경을 나타내는 신호를 발산함으로써 모든 하위 컴포넌트의 해당 속성 값이 자동으로 변경될 수 있습니다.

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

기본 상태에서 속성 값이 어떻게 변화하는지를 설명하는 다양한 UI 상태를 선언할 수 있습니다. 상태는 UI 로직을 구성하는 데 유용한 방법이 될 수 있습니다. 컴포넌트에 전환 효과를 연결하여 상태 변경으로 인해 속성이 변경될 때 어떻게 애니메이션이 적용될지 정의할 수 있습니다.

속성 별칭과 상태를 사용하여 컴포넌트 인스턴스 간의 차이를 생성하면, 컴포넌트를 중복 생성하지 않고 재사용할 수 있습니다. 따라서 컴포넌트를 완전히 새로운 컴포넌트 유형으로 처리할 필요가 없습니다. 이는 로딩 및 컴파일 시간을 단축할 뿐만 아니라 최종 애플리케이션의 패키지 크기도 줄여줍니다.

UI 컨트롤 사용자 정의

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

표현식 작성

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

일반적인 사용 사례

다음 표에는 몇 가지 대표적인 사용 사례가 요약되어 있으며, 자세한 정보를 확인할 수 있는 링크도 포함되어 있습니다.