기본적으로 Angular 템플릿은 불필요한 공백문자를 모두 제거합니다. 엘리먼트 사이에 있는 공백문자, 문자열 안에 공백문자가 여러 개인 경우 그렇습니다.
엘리먼트 사이에 있는 공백문자
개발자들은 템플릿의 가독성을 높이기 위해 줄바꿈과 들여쓰기를 자주 사용합니다:
<section> <h3>User profile</p> <label> User name <input> </label></section>
이 템플릿에는 엘리먼트 사이마다 공백문자들이 존재합니다.
공백문자를 모두 해시(#) 기호로 바꿔보면 이렇습니다:
<!-- 전체 공백문자: 20 --><section>###<h3>User profile</p>###<label>#####User name#####<input>###</label>#</section>
이런 공백문자를 모두 유지하는 것은 텍스트 노드를 불필요하게 생성하며, 화면 렌더링 성능도 나빠집니다. 그래서 Angular는 엘리먼트 사이에 있는 공백문자는 제거하는 방법으로 전체 성능을 향상시킵니다.
문자열 안에 중복된 공백문자
웹 브라우저가 HTML을 렌더링 하면 연속된 공백문자는 공백문자 하나로 변환됩니다:
<!-- 템플릿 파일 --><p>Hello world</p>
이렇게 작성해도 브라우저는 "Hello"와 "world" 사이에 공백을 하나만 표시합니다.
<!-- 브라우저에서 실제로 렌더링되는 내용 --><p>Hello world</p>
왜 이렇게 동작하는지 자세하게 알아보려면 HTML, CSS, DOM에서 공백문자가 처리되는 방식 문서를 참고하세요.
Angular는 템플릿을 컴파일하는 시점에 불필요한 공백 문자를 공백문자 하나로 변환하여 브라우저의 부담을 줄입니다.
공백문자 유지하기
@Component 데코레이터에서 preserveWhitespaces: true 옵션을 지정하면 공백문자를 그대로 유지할 수 있습니다.
@Component({ /* ... */, preserveWhitespaces: true, template: ` <p>Hello world</p> `})
하지만 꼭 필요한 경우가 아니라면 이 옵션은 사용하지 마세요. 공백문자를 그대로 유지하면 Angular가 화면을 렌더링할 때 텍스트 노드를 더 생성해야 하기 때문에 애플리케이션 성능이 나빠질 수 있습니다.
공백문자가 필요하다면 Angular에서만 지원하는 &ngsp;를 사용할 수도 있습니다.
이 기호는 컴파일 이후에도 유지되는 공백문자 하나를 표현합니다.