속성 간 바인딩 추가

컴포넌트의 동작을 동적으로 변경하려면 두 컴포넌트의 속성 간에 바인딩을 생성할 수 있습니다. 속성 바인딩을 생성하려면, 속성에 원하는 값으로 평가되는 JavaScript 표현식을 할당합니다. 배경에서는 바인딩 표현식 내의 변수들이 지속적으로 모니터링됩니다. 변경 사항이 감지되면 바인딩 표현식이 재평가되고, 새로운 결과가 해당 속성에 적용됩니다.

가장 간단한 형태의 바인딩은 다른 속성을 참조하는 것입니다. 예를 들어, 컴포넌트의 높이를 상위 컴포넌트의 높이에 바인딩하면, 상위 컴포넌트의 높이가 변경될 때 해당 컴포넌트의 높이가 자동으로 조정됩니다.

속성 바인딩 사용에 대한 자세한 내용은 ‘속성 바인딩’을 참조하십시오.

컴포넌트 간 바인딩을 생성하려면 ‘ Connections ’ > ‘ Bindings ’로 이동하십시오.

컴포넌트 속성 간 바인딩 생성

한 컴포넌트의 속성을 다른 컴포넌트의 속성에 바인딩하려면:

1. 2D 뷰에 두 개의 컴포넌트를 배치합니다.

   

2. 첫 번째 컴포넌트의 이름을 viewBox로 지정합니다.
3. 두 번째 컴포넌트의 이름을 connectBox로 지정합니다.
4. viewBox 컴포넌트에 굵은 검은색 테두리( Border )와 파란색 채우기( Color )를 적용합니다.
5. connectBox 컴포넌트를 선택합니다.
6. Connections 뷰에서 Bindings 를 선택합니다.
7. 바인딩 편집기에서 (Add) 버튼을 선택하여 현재 선택된 컴포넌트에 바인딩을 추가합니다.

   

   바인딩 편집기.

8. From 에서 viewBox를 부모 컴포넌트로 선택합니다. 그런 다음 해당 border.color 속성을 선택합니다.
9. To 에서 connectBox 컴포넌트가 이미 대상 컴포넌트로 선택되어 있습니다. 하단의 드롭다운 메뉴에서 color 를 선택하여 영향을 받는 속성을 설정합니다.
10. viewBox 컴포넌트의 border.color 가 connectBox 컴포넌트의 color 에 적용됩니다.

    

모든 바인딩에는 코드에 자동 생성된 JavaScript 표현식이 포함됩니다. 자세한 내용은 바인딩 설정을 참조하십시오.

속성 바인딩을 생성하는 예제는 ‘상태를 사용하여 컴포넌트 속성 값 변경’을 참조하십시오.

논리 연산자 요약

표현식에서 다음 논리 연산자를 사용하여 여러 조건을 하나의 표현식으로 결합할 수 있습니다:

또한, 검사 전에 산술 연산자를 사용하여 숫자를 비교할 수 있습니다. 하지만 가능하면 이 목적을 위해 별도의 속성을 생성하는 것이 좋습니다.