데이터 바인딩이란?

1. 데이터 바인딩이란? - 데이터 바인딩은 왜 필요한가?

---

 어플리케이션에서 '화면에 있는 객체'와 '데이터'를 일치시키는 일은 중요하다.

 ( 개발 경험이 없을 때는 이게 당연한 줄 알았다. 데이터를 보여주는건 당연하니까 )

 일반 어플리케이션 ( ex: SWT,jFace 이용 ) 에서는 바인딩이 자연스러운데 웹에서는 왜 이래?

 웹 출발 시점에는 사용자와의 양방향 상호작용을 가정한 것이 아님

 이 작업을 도와주는 것이 데이터 바인딩

 2. 기본 웹 기술의 데이터 바인딩 - framework 없이 데이터 바인딩 해보기

---

 

해야 할 일

1. 사용자가 입력한 정보를 얻어옴 
   
2. 찾아온 데이터를 갱신

위의 일을 위해서 DOM API나 jQuery를 사용함

예제) 

<input type="text" value="입력하세요">

<p></p>

<script>

$("input")

 .keyup(function(){

var value=$(this).val();

$(p).text(value);

 }).keyup();

</script>

• input 태그 안의 keyup 이벤트가 발생할 때 마다, 해당 input 요소의 val() 메서드를 통해 값을 읽어옴
• 읽어온 값을 <p> 요소의 text 프로퍼티에 값을 넣어줌

 3. AngularJS2 데이터 바인딩 - '화면에 UI 역할( DOM )' 과 'Component' 사이에서 4가지 방식 제공

---

 

1) interpolation

Component의 상태를 그대로 화면에 노출 시킬 때 사용하는 방법

@Component({

selector: 'my-component' ,

template: '<h4> MyComponent </h4>

   <div>{{myData}} </div>

})

export class MyComponent{

private myData: string;

constructor(){

this.myData = "화면에 보여질 글";

}

}

2) 프로퍼티 바인딩

DOM의 프로퍼티에 직접 바인딩 하는 경우

3) 이벤트 바인딩

4) 양방향 바인딩

• 사용자가 View (<input>) 에 입력할 때 Component의 상태에도 자동으로 반영 됨
• Component의 상태가 화면의 View에도 반영 됨

어떻게 양방향 바인딩이 되는거지?

Change Detector에 의해 이루어짐.

브라우저에서 발생 가능한 비동기 이벤트 ( XHR, setTimeout, Event)에 Change Detector가 

루트 컴포넌트로부터 Depth First Search 방식으로 데이터의 변경사항을 감지하여 양방향 바인딩을 가능하게 함

 4. 추가 공부 필요 

---

 

1) 1-way binding vs 2-way binding 성능 차이

View에서 수정이 일어나지 않는 경우 2-way binding을 선택하지 않아도 되는데, 굳이 2-way binding을 선택했다가

Change Detector 때문에 성능상 손해보는 걸 아닐까?

2) Change Detector는 어떻게 돌아가는 걸까?

이걸 알아야 1) 분석이 가능할 것 같다.