앵귤러 기초(Angular basic) 6.바인딩, Interpolation(보간)

바인딩의 개념 그리고 보간에 대해 알아보겠습니다. 

 

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

1. 바인딩이란
2. Interpolation(보간)이란

---

Binding(바인딩) 이란

Angular에서 바인딩은 컴포넌트 클래스와 해당 템플릿 간의 의사소통을 하고 데이터 전달하는 것을 의미합니다. 

예를 들어 클래스의 값을 템플릿에 제공하여 표시할 수 있으며, 템플릿에서는 이벤트를 발생시켜 사용자 작업이나 입력값을 다시 클래스에 전달합니다. 

 

바인딩 구문은 항상 템플릿에 정의 됩니다. 

Angular에서는 여러 종류의 바인딩을 제공하는데, 그중 interpolation(보간)에 대해 알아보겠습니다. 

Interpolation(보간) 

템플릿에서는 보간을 의미하는 이중 중괄호는 쉽게 볼 수 있습니다. 

위 예제의 페이지 제목은 컴포넌트 클래스의 속성에 바인딩되어 있습니다.  

보간은 클래스 속성에서 템플릿으로 단방향 바인딩되므로 화면에는 값이 표시됩니다.  

 

보간법은 단순히 속성의 이외에 간단한 계산과 같은 작업을 수행할 수 있습니다. 

<div>{{ 2*20+1 }}</div>

 

보간을 사용하여 아래에 표시된 것처럼 html요소 사이의 텍스트에 보간 된 문자열을 삽입할 수 있습니다. 

<div>{{'제목' + title}}</div>

 

또한 html element의 속성의 할당과 함께 보간을 사용 할 수도 있습니다. 

<!-- h1의 속성에 보간을 사용 -->
<h1 innerText = {{title}}></h1>
<h1>{{title}}</h1>

위의 두 h1은 모두 동일한 결과를 표시 합니다. 

  

보간 이중 중괄호 사이의 구문을 템플릿 표현식 (template expression)이라고 합니다. 

Angular는 컴포넌트를 컨텍스트(환경)로 사용하여 해당 식을 평가합니다.

따라서 Angular는 속성 값을 얻거나 메서드를 호출하기 위해 컴포넌트를 찾습니다. 

그런 다음 Angular는 템플릿 식 결과를 문자열로 변환하고 해당 문자열을 element 또는 directive의 속성에 할당합니다. 

이런 방식으로 언제든지 클래스의 데이터에 대한 property를 정의하고 보간을 사용하면 템플릿에 해당 데이터를 표시할 수 있게 됩니다.  

 

지난 포스트에 이어 실습을 한번 해보겠습니다.  

지난번에 만들었던 movie-list.component.html를 열어보겠습니다. 

Movie List라는 문자열이 하드코딩

여기 제목이 하드 코딩되어 있습니다.  

제목을 HTML에서 하드코딩하지 않고 클래스의 속성에 바인딩하면 코드 작업을 할 때 쉽게 보고 변경할 수 있으며 나중에 파일이나 데이터베이스에서 이 텍스트를 검색할 수 있습니다. 

바인딩을 사용해서 템플릿의 하드코딩을 없애 보도록 하겠습니다.

 

먼저 페이지에 대한 클래스에 속성을 추가합니다.

typeScript를 사용하고 있기 때문에 이 속성의 타입을 string으로 정의합니다.

그리고 프로퍼티의 디폴드 값인 ''영화 리스트"를 설정했습니다. 

클래스에서 속성을 추가했으니 이제 subTitle 속성을 템플릿의 subTitle 속성에 바인딩할 수 있습니다. 

템플릿에 하드 코딩된 "MovieList"를 보간으로 대체하고 속성의 이름을 지정하였습니다. 

 

이제 이 템플릿이 표시되면 Angular는 pageTitle 특성의 문자열 값을 이 div 요소의 innerText 특성에 됩니다. 그리고 제품 목록이 표시됩니다.  결과를 브라우저에서 보겠습니다.  

잘 표시되는 걸 확인해 볼 수 있습니다.

 

수고하셨습니다. 

여기까지 간단하지만 강력한 바인딩의 보간에 대해 알아보았습니다. 

아직 바인딩의 소개가 전부 끝나지 않았습니다. 

디렉티브의 추가 설명 후에 조금 더 바인딩에 대해 알아보도록 하겠습니다. 

 

같이 읽기

[프로그래밍/Angular] - 앵귤러 기초(Angular basic) 5.템플릿, 컴포넌트 만들기