속성 간에 바인딩 추가하기

컴포넌트의 동작을 동적으로 변경하려면 두 컴포넌트의 속성 사이에 바인딩을 만들 수 있습니다. 속성 바인딩을 만들려면 원하는 값으로 평가되는 자바스크립트 표현식이 속성에 할당됩니다. 백그라운드에서는 바인딩 표현식의 변수가 모니터링됩니다. 변경이 감지되면 바인딩 표현식이 다시 평가되고 새 결과가 프로퍼티에 적용됩니다.

바인딩은 가장 간단하게는 다른 프로퍼티에 대한 참조일 수 있습니다. 예를 들어 컴포넌트의 높이를 부모의 높이에 바인딩하여 부모 높이가 변경되면 컴포넌트 높이가 자동으로 조정되도록 할 수 있습니다.

속성 바인딩 사용에 대한 자세한 내용은 속성 바인딩을 참조하세요.

컴포넌트 간 바인딩을 만들려면 Connections > Bindings 으로 이동하세요.

컴포넌트 속성 간에 바인딩 만들기

컴포넌트의 속성을 다른 컴포넌트의 속성에 바인딩하려면 다음과 같이 하세요:

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

   

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

   

   바인딩 편집기를 엽니다.

8. From 에서 뷰박스를 상위 컴포넌트로 선택합니다. 그런 다음 border.color 속성을 선택합니다.
9. To 에서 connectBox 컴포넌트가 이미 대상 컴포넌트로 선택되어 있습니다. 아래 드롭다운에서 color 을 선택하여 영향을 받는 속성을 설정합니다.
10. 뷰박스 컴포넌트의 border.color 속성이 connectBox 컴포넌트의 color 에 적용됩니다.

    

모든 바인딩에는 코드에 자동화된 JavaScript 표현식이 있습니다. 자세한 내용은 바인딩 설정을 참조하세요.

속성 바인딩 생성의 예는 상태를 사용하여 컴포넌트 속성 값 변경하기를 참조하세요.

논리 연산자 요약

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

또한 산술 연산자를 사용하여 검사 전에 숫자를 비교할 수 있습니다. 그러나 가능하면 이 용도로 별도의 프로퍼티를 만드는 것이 좋습니다.