[Angular] Data binding

 

Angular Tutorial을 따라하면서 기존 JQuery와는 조금 다른 데이터 바인딩 방법에 대해 알게 되었다.

Data binding은 View와 Model을 하나로 연결하는 것을 의미한다.

 

 

1. JQuery에서의 Data binding

기존 JQuery에서는 DOM에 직접 접근해서 데이터를 조작하는 코드를 작성해야 했다.

아래 예제 코드를 보면, HTML 파일에서 h1 요소가 p 요소로 변경되면, Javascript에서도 $('h1')을 $('p')로 바꿔줘야 한다.

 

 

이처럼 Javascript는 DOM을 직접 조작하는 방식이기 때문에, View가 변경되면 로직도 변경될 가능성이 매우 높다.

 

 

하지만 Angular의 경우, DOM에 직접 접근하지 않고, Component 클래스 파일에서 Template 파일을 선언하면서 View와 Model의 관계를 관리한다. 이 때 사용되는 것이 바로 데이터 바인딩이다.

데이터 바인딩은 템플릿 문법으로 기술된다.

 

 

2. Angular에서의 Data binding

 

위 예제를 보면, 템플릿 파일(app.component.html)에서 직접 Component 클래스의 프로퍼티(여기서는 title 변수)를 참조하고 있기 때문에, DOM에 직접 접근하고 조작하는 코드를 작성할 필요가 없다.

따라서 템플릿 파일에서 h1 요소가 p 요소로 바뀌어도 Component 클래스 파일에서 변경할 필요가 없다.

 

 

 

 

 

3. 변화 감지(Change Detection)

그렇다면 데이터 값에 변화가 생겼을 때 Component 클래스와 Template 파일은 어떻게 이를 감지하고 반영할까?

여기서 Angular의 가장 유명한 특징인 '양방향 데이터 바인딩'이 나타난다.

 

React의 경우에는 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 '단방향 데이터 바인딩'을 배웠다.

Angular는 '양방향 데이터 바인딩'을 지원하는데, 여기서 양방향은 템플릿 파일과 Component 클래스 파일 간의 '이벤트 바인딩'과 '프로퍼티 바인딩'을 뜻한다.

 

프로퍼티 바인딩과 이벤트 바인딩

위 예제를 보면 클릭 이벤트를 통해 Component 클래스의 title 프로퍼티가 변경된다.

그리고 변경된 title 프로퍼티는 템플릿 파일에 반영된다.

 

 

 

 

4. Data binding 종류

데이터 바인딩 방법은 위와 같이 7가지가 있다. 각각의 방법에 대한 자세한 설명은 아래 참고 사이트에 자세히 나와있으므로 들어가서 확인해볼 것!

 

 

 

 

참고 사이트: https://poiemaweb.com/angular-component-data-binding

Angular Component - Data Binding | PoiemaWeb