앵귤러는 컴포넌트 단위로 뷰를 생성하고 관리한다.

그림과 같이 분할된 뷰는 앵귤러에서 컴포넌트를 구성하는 단위가 된다.

컴포넌트에는 뷰를 렌더링할 정보인 템플릿이 있다. 앵귤러의 탬플릿은 HTML바탕으로 앵귤러 고유의 문법을 통해 뷰를 렌더링할 정보와 이벤트 처리 로직을 담고있다.

결론적으로 애플리케이션 실행시 컴포넌트와 템플릿 코드를 바탕으로 뷰를 만든다.

앵귤러는 컴포넌트가 제공하는 정보를 뷰에 전달하고 뷰에 서 일어나는 사용자의 액션을 다루는 일을 대신한다.

1 컴포넌트 선언하기

컴포넌트 = 클래스

Component 데코레이터(@)를 붙이므로서 해당 클래스 함수는 컴포넌트가 된다.

import { Component } from "@angular/core";

@Component({
		selector: 'af-simple',
		template: `<h1>Angular</h1>`
})
export class SimpleComponent { }

2 메타데이터

설정 정보를 의미한다.

메타 데이터는 Component 데코레이터를 통하여 전달한다.

메타데이터는 필수적인 값은 없지만, 템플릿 정보와 selector는 사실상 필수로 입력해야 한다.

template
컴포넌트는 반드시 뷰를 그릴 정보를 가지고 있어야 하기 때문이다. template은 뷰를 그리는 데 필요한 템플릿 코드를 인라인으로 메타데이터 안에 직접 기술하는 방법이다.

//...
@Component({
		selector: 'hello-angular',
		template: `
				<div>this is angular container</div>
		`
})

templateUrl & styleUrls

템플릿 내용이 클 경우 템플릿을 html/css 파일로 분리하여 관리 할수 있는 메타데이터

(templateUrl)

//...
@Component({
		selector: 'hello-angular',
		templateUrl: 'html파일 주소 경로',
		styleUrls: ['css파일 주소 경로들']
})

selector

selector명으로 css선택기 문법으로 사용할수 있다.

예를 들어 a컴포넌트에서 selector명이 ‘hello’인 컴포넌트를 사용하고 싶을때 사용하는 것이다.

a.component.html

<div>
		<hello></hello>
</div>

3 부트스트래핑

컴포넌트를 앵귤러가 다루는 시작점은 애플리케이션을 부트스트래핑할 때 이다.

부트스트래핑이란?

브라우저에서 애플리케이션을 최초 실행할 때 진행되는 과정을 의미한다.

appModule의 코드를 살펴보자

NgModule의 메타데이터중 bootstrap과 declarations가 컴포넌트와 관련된 설정이다.

bootstrap

애플리 케이션을 부트스트래핑할 때 어떤 컴포넌트를 사용할 것인지 배열로 선언한 컴포넌트 정보이다. 브라우저에서 최초 index.html을 요청하여 애플리케이션을 실행할 때 사용할 컴포넌트 이다.

declarations

앵귤러 애플리케이션에서 사용할 모든 컴포넌트를 배열로 선언한 정보

4 컴포넌트 트리

컴포넌트가 여러 컴포넌트를 사용하여 뷰를 구성하기 때문에 컴포넌트 트리가 존재 한다. index.html에서 사용할 컴포넌트가 트리의 루트이다.

---

위 포스팅은 앵귤러 첫걸음(조우진) 책의 내용을 학습 목적을 위해 요약 정리한 내용 입니다.