1. 애플리케이션
앵귤러 애플리케이션은 컴포넌트의 트리 구조이다. 이 트리 구조의 루트에서 최상위 컴포넌트는 애플리케이션 그 자체이다. 브라우저가 앱을 시동할 때 렌더링하는 것이 바로 애플리케이션이다. 컴포넌트의 장점 중 하나로 컴포넌트는 구성 가능하다는 점을 들 수 있다. 다시 말해, 작은 컴포넌트들이 큰 컴포넌트를 구성하고 다시 이 컴포넌트 들의 통합이 애플리케이션이다. 컴포넌트를 부품으로 사용한 조립 로봇으로 이해하면 쉽다.
2. 컴포넌트
앞에서 언급한 대로 컴포넌트는 앵귤러 애플리케이션의 토대가 되는 일종의 빌딩 블록이다. '애플리케이션' 자체가 최상위 컴포넌트이며, 애플리케이션은 더 작은 자식 컴포넌트로 구성되는 것이다.
새로운 애플리케이션을 만들 때, 새 애플리케이션을 와이어프레임이나 종이에 목업을 디자인하고 세부 컴포넌트로 나누는 과정을 따르는 경우가 많다.
컴포넌트는 주로 세 부분으로 구성된다.
- 컴포넌트 데코레이터 (Decorator)
- 뷰(View)
- 컨트롤러(Controller)
@Component({
selector: 'app-root',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
@Component (Decorator)
@Component는 이어지는 클래스에 메타데이터를 추가한다. 메타데이터는 해당 컴포넌트가 어떠한 데이터를 가지고 뷰에 어떻게 적용되는 지에 대한 정보가 담겨있다. 즉, 앵귤러는 @Component에 담긴 메타데이터를 통해서 컴포넌트가 템플릿에서 사용될 이름(태그명), 템플릿의 코드 or 경로, css 코드 or 경로를 파악한다. 그리고 이 메타데이터와 class에 구현된 로직을 통해서 뷰에 적용한다.
-
selector
selector 키를 적용하면 컴포넌트가 템플릿에 사용될 때 인식되는 방식을 나타낼 수 있다. 쉽게 말하면 html(template)에서 사용하는 코드의 이름으로 이해하면 된다. -
template
뷰는 컴포넌트의 시각적 요소다. @Component에 template 옵션을 사용하면 컴포넌트에 사용될 HTML 템플릿을 선언할 수 있다. template에 html파일의 경로를 설정하거나 직접 태그를 입력해서 사용할 수 있다.
