# 데이타 바인딩 속성 (property)

[데이타바인딩](./data-binding.md)으로 전파될 데이타 값이 적용될 대상 컴포넌트의 속성을 의미한다.

## 속성 (property)

- text
  - 대상 컴포넌트의 텍스트에 반영된다.
- fill style(fillStyle)
  - 대상 컴포넌트의 배경색에 반영된다.
  - eg. 'red', 'navy', '#275394', '#777'
- stroke style(strokeStyle)
  - 대상 컴포넌트의 테두리 색상에 반영된다.
  - eg. 'red', 'navy', '#275394', '#777'
- font color(fontColor)
  - 대상 컴포넌트의 텍스트 색상에 반영된다.
  - eg. 'red', 'navy', '#275394', '#777'
- value

  - 대상 컴포넌트의 대표 속성에 반영된다.
    - 각 컴포넌트들은 자신의 대표 속성을 가지게 됩니다. 대부분의 컴포넌트는 'text' 속성이 대표속성입니다.
    - value 속성은 각 컴포넌트의 대표속성과 동일한 기능을 합니다.
    - 예를 들면, 'rect' 컴포넌트의 경우에 'value'와 'text' 속성은 같은 효과를 만들게 됩니다. 'rect'의 대표 속성이 'text' 이기 때문입니다.
    - 'scenario-run' 컴포넌트의 경우에 'value'는 'variables' 속성과 같은 기능을 하게됩니다. 이 속성은 시나리오 호출시에 넘겨줄 파라미터로 사용됩니다.
    - 각 컴포넌트의 대표 속성이 무엇인지는 각 컴포넌트 도움말을 참조하시기 바랍니다.

- data
  - 대상 컴포넌트의 data 속성에 반영된다.
  - 모든 컴포넌트들이 데이타 전파를 위해서 가지는 속성.(컴포넌트의 data에 변화가 생기면, 설정된 data 바인딩이 수행된다)
  - 보통 이 속성은 컴포넌트의 모양이나 기능에 직접 영향을 미치지 않습니다.
- source
  - 대상 컴포넌트의 source 속성에 반영된다.
  - 대상 컴포넌트에 source 속성이 있는 경우에 사용할 수 있다.
- hidden
  - 대상 컴포넌트의 hidden 속성에 반영된다.
  - true, false
- started
  - 대상 컴포넌트에 등록된 애니메이션을 시작하거나 멈출 수 있다.
  - true, false
- play
  - 대상 컴포넌트의 play 속성에 반영된다.
  - 대상 컴포넌트에 play 속성이 있는 경우에 사용할 수 있다. (동영상, 사운드, gif 등)
  - true, false
- reference(ref)
  - 대상 컴포넌트의 ref 속성에 반영된다.
  - 대상 컴포넌트에 ref 속성이 있는 경우에 사용할 수 있다.
- options
  - 대상 컴포넌트의 options 속성에 반영된다.
  - 대상 컴포넌트에 options 속성이 있는 경우에 사용할 수 있다.(select)
- rotate
  - 대상 컴포넌트의 rotate 속성에 반영된다.
  - 기본 형태에서 컴포넌트의 x,y,z축을 기준으로 회전하는 각도를 지정할 수 있다.
  - 3차원 공간에서의 회전값을 의미하므로 { x: 0, y: 0, z: -3.14 } 과 같이 각각 'radian' 값으로 오브젝트로 바인딩하여야 한다.
  - 2차원 공간에서의 회전은 z축 값을 제공하면되며, { z: -1.57 } 을 바인딩하면 시계방향으로 90도 만큼 회전한다.(마이너스 방향이 시계방향이다.)
- dimension
  - 대상 컴포넌트의 차원별 크기 속성에 반영된다.
  - 기본 형태에서 컴포넌트의 x,y,z축을 기준으로 크기를 지정할 수 있다.
  - 3차원 공간에서의 크기를 의미하므로 { width: 100, height: 100, depth: 100 } 과 같이 각각 오브젝트로 바인딩하여야 한다.
  - 2차원 공간에서의 크기는 width, height축 값을 제공하면된다, { width: 100, height: 100, depth: 1 } 을 바인딩하면 가로 100, 세로 100의 크기로 변경된다.
- location
  - 대상 컴포넌트의 중심 위치를 기준으로 설정된 위치로 이동한다.
  - 대상 컴포넌트를 x, y, z 위치를 지정할 수 있다.
  - 2차원 공간에서의 위치는 x, y축 값을 제공하면되며, { x: 100, y: 100 } 을 바인딩하면 논리적인 좌표상의 100, 100의 위치로 컴포넌트의 중심이 이동하게된다.
- accessor
  - 대상 컴포넌트의 accessor 속성에 반영된다.
  - 대상 컴포넌트에 accessor 속성이 있는 경우에 사용할 수 있다.
- (tap)
  - 대상 컴포넌트의 탭이벤트를 발생시킨다.
  - 따라서, 컴포넌트의 탭이벤트 효과에 설정된 기능이 동작하게 된다.
- (action)
  - 타겟 컴포넌트(들)의 어떤 속성에도 적용되지 않는다.
  - (action) 속성은 주로 데이타 전파 시점에 스크립트 동작만을 시키고 싶을 때 사용된다.