Angular

Angular는 컴포넌트를 중심으로 웹 애플리케이션을 구성하는 프레임워크이다. 컴포넌트는 TypeScript 클래스, 화면 템플릿과 메타데이터를 결합한다. 이름이 비슷한 AngularJS와는 구별해서 설명한다.

컴포넌트의 구성

클래스는 입력 처리와 동작을 표현하고 HTML 템플릿은 화면 구조를 정의한다. Component 데코레이터의 메타데이터에는 선택자와 템플릿·스타일 정보 등이 들어간다. 선택자에 해당하는 요소에서 컴포넌트가 사용되며, 전체 화면은 컴포넌트 트리를 이룬다.

독립 컴포넌트와 가져오기

현행 문서는 독립 컴포넌트를 기본으로 설명하며 다른 컴포넌트나 지시자·파이프를 imports에 지정해 사용할 수 있다. 과거 버전이나 기존 코드에서는 NgModule을 사용하는 구성을 볼 수 있으므로, 문서와 프로젝트의 버전을 맞춰 읽는다.

화면 분리 예시

사용자 목록 화면을 검색 입력, 목록, 사용자 카드로 나누면 각 단위의 입력과 이벤트를 명확히 정의할 수 있다. 단순히 파일 수를 늘리기보다 어떤 데이터가 부모에서 내려오고 어떤 사용자 동작이 위로 전달되는지에 따라 경계를 정한다.

템플릿과 스타일

템플릿과 스타일을 클래스 옆에 적거나 별도 파일로 분리할 수 있다. 기본 컴포넌트 스타일 범위는 컴포넌트 화면에 한정되는 방식으로 처리된다. 동작을 비교할 때는 템플릿 문법과 의존성 구성 등 Angular가 제공하는 애플리케이션 모델을 함께 살펴본다.

참고 자료