앵귤러 기초(Angular basic) 9.프로퍼티 바인딩(property binding)

데이터 바인딩의 프로퍼티 바인딩에 대해 알아 보겠습니다.

 

이번 포스트에서는 아래 내용을 다루고 있습니다.

1. 다양한 바인딩(프로퍼티 바인딩, 이벤트 바인딩, 양방향바인딩)
2. 프로퍼티 바인딩
3. 프로퍼티 바인딩과 보간(interpolation)의 비교

---

다양한 바인딩

앵귤러의 데이터바인딩을 이용하면 단순히 컴포넌트의 프로퍼티를  화면에 표시 하는것 이상의 많은 일을 할 수 있습니다.

 

1.프로퍼티바인딩

웹에서는 인터렉티브한 사용자 경험을 제공하기 위해서 필요에 따라 화면의 분위기과 느낌 혹은 출력 값 등을 변경해야 할 필요가 있습니다.

앵귤러에서는 컴포넌트의 프로퍼티를 DOM element에 바인딩하여 필요에 따라 느낌과 모양을 변경할 수 있습니다.

예를 들어 데이터 값에 따라 요소 색상 또는 스타일을 변경하거나, 사용자 환경에 따라 글자 크기를 업데이트할 수 있습니다.  또한 이미지 소스를 데이터베이스로부터 설정할 수도 있습니다.

 

2.이벤트바인딩

그리고 바인딩을 함으로 DOM으로부터 유저의 행동(클릭과같은) 및 기타 이벤트에 대한 알림을 받아 컴포넌트가 적절하게 대응할 수 있게 만들 수 있습니다.

예를 들어, 버튼을 클릭하면 이미지를 숨기거나 보여주게 응답이 가능해집니다.

 

3.양방향바인딩

때로는 양방향 바인딩을 사용하여 요소 속성을 설정하고 해당 속성에 대한 사용자 변경 사항에 대한 이벤트 알림을 수신하여 양쪽 모두 최대한 활용할 수 있습니다.

 

우선 프로퍼티 바인딩부터 차근차근 알아보겠습니다.

---

프로퍼티 바인딩

프로퍼티 바인딩을 사용하면 요소(element)의 프로퍼티를 템플릿 표현식의 값으로 설정 할 수 있습니다.

위의 img요소를 살펴 보겠습니다.

이미지의 src속성(property)을 imageUrl에 바인딩하여 component의 정보로부터 이미지의 소스를 효과적으로 정의하고 있습니다.

프로퍼티 바인딩을 사용하면 요소의 프로퍼티는(src)는 대괄호[]로 표기하고 템플릿 표현식은 따옴표로 표기합니다.

 

프로퍼티바인딩과  보간(interpolation)의  비교

Interpolation(보간)과 프로퍼티 바인딩을 비교해 보도록 하겠습니다.

보간을 사용할 때  요소의 프로퍼티는 대괄호로 묶이지 않으며 템플릿 표현식은 따옴표 없이 중괄호로 표기합니다. 합니다.

요소의 프로퍼티에 바인딩할 때 많은 개발자들은 보간보다 프로퍼티바인딩을 선호 합니다.

위의 예제 코드와 같이 프로퍼티바인딩을 사용하면 문자열이 아닌 값을 바인딩할 수 있습니다. 반면에 보간은 항상 문자열을 할당합니다.

그러나 위 예와 같이 템플릿 표현식을 표현식의 일부로 포함해야 하는 경우 보간을 사용하는 것이 편리합니다.

 

보간과 마찬가지로 프로퍼티바인딩은 컴포넌트에서 HTML 요소 프로퍼티로 가는 단방향 바인딩입니다. 이를 통해 컴포넌트에서 템플릿의 DOM을 효과적으로 제어 할 수 있습니다.

---

간단히 실습을 해보겠습니다.

영화 목록을 보여주는 예제에서 테이블에서 영화 이미지보여주는 처리를 비어놨었는데요.

비워놨던 이미지 출력을 프로퍼티 바인딩을 이용해서 작성해보겠습니다. 해보겠습니다.

img 요소를 사용하여 영화 이미지를 표시하고 프로퍼티 바인딩을 사용하여 src 프로퍼티를 바인딩합니다.

프로퍼티 바인딩임으로 src를 대괄호로 표기한 후=기호 오른쪽에는 따옴표로 템플릿 표현식을 정의합니다.  결과적으로 src는 컴포넌트 클래스에서 imageUrl 속성에 바인딩하게 하게 됩니다.

그 외하나 더 img의 title 프로퍼티를 컴포넌트의 movies.name에 바인딩 하였습니다.

 

브라우저에서 결과를 확인해 보겠습니다.

이미지가 너무 커서 알아 보기 힘든 상태가 되었네요.

하지만 이미지는 잘 표시되고, 마우스 오버시  title도 잘 표시 되는걸 확인할수 있었습니다.

 

보기 힘든상태를 고치기 위해 css로 이미지를 크기를 변경 할 수도 있지만, 지금은 프로퍼티 바인딩을 이용하여 이미지 크기를 알맞게 바꿔 보겠습니다.

컴포넌트 클래스에 imgWidth와 imgMargin을 추가한 뒤, 각각 [style.width.px]와 [style.margin.px]에 프로퍼티 바인딩 하였습니다.

 

브라우저에서 다시 살펴보겠습니다.

이제 테이블에서 이미지가 알맞게 보이네요.

 

여기까지 수고하셨습니다. 이것으로 프로퍼티 바인딩에 대해 마치겠습니다.

다음 포스트는 이어서 이벤트 바인딩에 대해 알아보도록 하겠습니다.