개요 • Angular

팁: 고급 내용을 읽어보기 전에 핵심 가이드 문서를 먼저 확인해 보세요.

모든 Angular 컴포넌트는 화면에 렌더링할 내용을 DOM으로 정의한 템플릿 을 갖습니다. 템플릿을 활용하면 애플리케이션 데이터가 변경되더라도 화면을 언제나 최신 상태로 유지할 수 있습니다.

템플릿은 *.component.ts 파일의 template 프로퍼티로 정의하거나 별도 *.component.html 파일로 정의합니다. 자세한 내용은 컴포넌트 심화 가이드 문서를 참고하세요.

템플릿은 어떻게 동작할까요?

템플릿은 HTML 문법을 바탕으로 하며, 여기에 템플릿 함수, 데이터 바인딩, 이벤트 리스닝, 변수 선언 등 Angular가 제공하는 기능을 더한 것입니다.

Angular는 애플리케이션을 빌드할 때 템플릿을 JavaScript 코드로 변환하며, 애플리케이션에 맞체 렌더링도 최적화 합니다.

Angular 템플릿은 표준 HTML 문법과 다른 점이 있습니다:

템플릿 소스 코드에 있는 주석은 렌더링 결과물에서 제외됩니다.
컴포넌트나 디렉티브 엘리먼트는 <UserProfile />과 같이 닫는 태그 없이 스스로 닫을 수 있습니다.
[]나 () 와 같이 특수기호를 사용하는 어트리뷰트는 별도 동작을 합니다. 자세한 내용은 바인딩 문서나 이벤트 리스너 연결하기 문서를 참고하세요.
@ 문자는 흐름 제어와 같이 동적인 기능을 시작하는 기호입니다. @ 문자를 기호로 사용하려면 &commat; 나 @ 같은 HTML 문자 기호를 대신 사용하세요.
공백문자가 여러개 있으면 하나로 합칩니다. 자세한 내용은 공백문자 문서를 참고하세요.
동적 컨텐츠가 위치할 곳에는 Angular가 주석 노드를 추가하지만, 개발자가 신경쓸 필요는 없습니다.

그리고 HTML 문법은 대부분 템플릿에서도 사용할 수 있지만, <script> 엘리먼트는 사용할 수 없습니다. 자세한 내용은 보안 문서를 참고하세요.

이런 내용도 알아보면 좋습니다:

주제	설명
동적 문자열, 프로퍼티, 어트리뷰트 바인딩	동적인 데이터를 문자열, 프로퍼티, 어트리뷰트와 바인딩할 수 있습니다.
이벤트 리스너 추가하기	템플릿에서 발생하는 이벤트에 반응할 수 있습니다.
양방향 바인딩	데이터를 바인딩하면서 변화 감지도 함께 연결합니다.
흐름 제어	엘리먼트를 조건부로 표시하거나 반복할 수 있습니다.
파이프	데이터 표현 형식을 변경합니다.
`ng-content`로 자식 컨텐츠 표시하기	컴포넌트가 컨텐츠를 받아 표시할 수 있습니다.
`ng-template`으로 템플릿 조각 생성하기	템플릿 조각을 선언합니다.
`ng-container`로 엘리먼트 묶기	엘리먼트 여러개를 묶거나 컨텐츠가 렌더링 될 위치를 지정합니다.
템플릿 변수	템플릿에 변수를 선언할 수 있습니다.
지연 로딩: `@defer`	`@defer` 를 사용해서 템플릿을 지연 로딩할 수 있습니다.
표현식 문법	Angular 표현식과 표준 JavaScript 문법이 어떻게 비슷하고 다른지 알아봅니다.
공백문자	Angular가 공백문자를 다루는 방식을 알아봅니다.