# 데이타 바인딩

[데이타바인딩 소개](./data-binding.md)

## 데이타 전파 (Data Spread)

- 소스 컴포넌트의 data 값을 기반으로 대상 컴포넌트의 속성을 변경시키는 설정이다.
- 만일, 소스 컴포넌트가 대상 컴포넌트의 data속성을 변경시키는 경우, 대상 컴포넌트의 Data Spread 기능이 연속적으로 동작하므로, 이 기능을 데이타 전파라고 한다.
- 여러개의 데이타 전파 설정이 가능하다

### 복사, 붙여넣기 그리고 삭제

- 데이타전파와 관련한 반복적인 설정이 번거러울 수 있기 때문에, 복사, 붙여넣기 그리고 삭제 기능을 제공한다.
- 복사-붙여넣기 : 현재탭의 데이타전파 설정을 복사하여, 다른 컴포넌트의 데이타전파 설정에 붙여넣기할 수 있다.
- 삭제 : 컴포넌트의 데이타전파 설정 중에서 현재 탭의 설정만을 삭제한다.

### 소스데이타 (source)

- 소스 컴포넌트를 지정하면, 해당 컴포넌트의 데이타(data)를 대상(target) 컴포넌트(들)에 전파한다.
- 컴포넌트 관계에 기반한 대상 지정
  - (self) : 컴포넌트 자신
- id로 지정 : #id
- 지정하지 않으면, (self)와 동일하게 컴포넌트 자신의 데이터(data)를 전파한다.

### 접근자 (accessor)

- 설정 방법은 [JSONATA 도큐먼트](http://docs.jsonata.org/overview.html)를 따른다.

### 대상 (target)

- 데이타 전파 대상 컴포넌트를 지정한다.
- 컴포넌트와의 관계에 기반한 대상 지정
  - (self) : 컴포넌트 자신
- id로 지정 : #id
- class로 지정 : .class
- data에 기반한 대상 지정
  - (key) : data 객체의 키값을 id로 하는 컴포넌트들이 대상 컴포넌트가 된다.
  - [property] : data 객체의 property의 값을 id로 하는 컴포넌트들이 대상 컴포넌트가 된다.

### [속성(property)](./data-binding-property.md)

- 전파될 데이타 값이 적용될 대상 컴포넌트의 속성을 지정한다.
- [속성](./data-binding-property.md) 참조

### 규칙 타입 (rule)

전파될 데이타가 대상 컴포넌트 속성에 적용되는 방법을 지정한다.

- 값 (value)
  - 값 자체가 그대로 대상 컴포넌트의 속성에 설정된다.
- 매핑 (map)
  - 값을 키로 하는 매핑값이 대상 컴포넌트의 속성에 설정된다.
- 범위 (range)
  - 값이 포함된 범위의 매핑값이 대상 컴포넌트의 속성에 설정된다.
- 함수 (eval)
  - eval 코드는 자바스크립트 문법으로 작성할 수 있다.
  - eval 코드의 context (this)는 소스 컴포넌트이다.
  - eval 코드의 parameter 는 value와 targets가 있다.
    - value : 소스 컴포넌트의 data에 accessor가 적용된 값
    - targets : 타겟 컴포넌트 리스트

### No Data No Spreading

- 규칙 타입에 따른 최종 결과값이 빈 값이 아닌 경우에만 전파한다.
  - 결과값이 undefined, null, NaN, 공백('')인 경우에는 전파하지 않는다.
  - 결과값이 숫자 0인 경우에는 전파한다.

### 부분 전파 (Partial Spreading)

부분 전파는 객체를 조작하고 속성을 복사하거나 수정할 때 유용한 개념입니다.

가령, 레스토랑 메뉴 아이템을 관리하는 컴포넌트를 가정해 봅시다. 각 컴포넌트는 아래와 같은 정보를 포함하는 'data' 객체를 가집니다.

```plaintext
대상(target) 컴포넌트 데이타 (업데이트 전):
- 이름 (name)
- 가격 (price)
- 설명 (description)
- 칼로리 (calories)
```

우리는 대상(target) 컴포넌트의 일부 속성을 업데이트하려고 합니다. 다음은 업데이트할 일부 정보를 담은 소스(source) 데이타입니다.

```plaintext
업데이트 정보:
- 가격 (price)
- 칼로리 (calories)
```

이제 부분 전파를 사용하여 대상(target) 컴포넌트에 일부 정보만을 적용할 수 있습니다. 이렇게 하면 소스(source)의 데이터로 타겟(target) 데이터의 원하는 속성만 변경할 수 있습니다.

그 결과, 타겟(target) 컴포넌트의 데이타는 다음과 같이 업데이트됩니다.

```plaintext
타겟 컴포넌트 데이타 (업데이트 후):
- 이름 (name)
- 가격 (price, 업데이트된 값)
- 설명 (description)
- 칼로리 (calories, 업데이트된 값)
```