데이터 바인딩

데이터 바인딩

두 데이터 또는 정보의 소스를 모두 일치시키는 기법이다.

Web Application에서 html 정보를 담고있는 템플릿과 컴포넌트가 가지고 있는 동적인 데이터를 일치시켜야 한다.

이것을 가능하게 해주는 것이 데이터 바인딩이다.

데이터 바인딩은 양방향 바인딩과 단방향 바인딩이 있다.

간단하게 양방향 바인딩은 데이터와 화면 사이의 데이터가 지속적으로 일치하도록 하는것이고,

단방향 바인딩은 데이터가 한쪽으로만 바인딩 되는것이다.

일단 무슨 말인지 감이 오지 않는다.

예시를 들어보자.

 

  - 양방향 바인딩의 경우, 만약 html의 input박스에 데이터를 입력할 경우를 생각해보자.

사용자는 input박스에 무언가를 입력하여 데이터를 변경할 수 있다.

대표적으로 AngularJS가 양방향 바인딩을 사용한다고 한다 (앵귤러랑 vue는 아예 안써봄,,,)

(html ↔ javascript 양쪽에서 데이터 변경이 가능하다.)

  - 단방향 바인딩의 경우, 위와 같은 상황에서 사용자가 input박스에 무언가를 입력한다고 데이터를 변경할 수 없다.

Javascript -> html의 방향으로만 데이터 바인딩이 가능하다. 즉 html에 바인딩 한 데이터를 javascript에서 수정할 경우 화면에 반영이 되지만, 반대로 화면에 직접 해당 엘리먼트의 값을 바꿨을때 javascript의 데이터가 수정되도록 바인딩하는 방법은 제공하지 않는다.

 

양방향 바인딩

 

단방향 바인딩

 

React는 단방향 바인딩을 제공한다.

React공식문서의 설명으로는 React의 단방향 데이터흐름은 모든 것을 모듈화 하고 빠르게 만들어 준다고 한다.

 

ko.reactjs.org/docs/thinking-in-react.html

React로 사고하기 – React