Angular 기본(3) 컴포넌트 생성

(3) Component 생성하기

앵글러에서 Component는 찐빵의 앙꼬와 같다. 앵글러에서 컴포넌트란, 자신이 사용하고 싶은 html 태그를 앵글러에게 인식시키는 기능을 제공한다. 가령,html에서<friend></friend> 와 같은 '친구'태그를 만들어 사용하고 싶다면, 컴포넌트에서 friend 태그를 인식하도록 기능을 넣어주면 되는 방식이다. 

1 컴포넌트 태그 만들기

<hello></hello>란 태그를 한번 만들어보자. 컴포넌트를 수동으로 생성할수도 있지만, 현재 angular cli를 설치하였기에 명령어로 편리하게 컴포넌트를 만들어보자. 다음 명령어를 실행한다.

`` ng generate component hello `` 

2 component파일 구조

아래 component파일의 구조를 살펴보자. import 부분은 말그대로 외부 모듈에서 기능을 갖고 온다는 의미인데, '임대'라 생각하면 이해가 쉽다.

아래에서는 angular/core에서 Component와 OnInit 기능을 차용하겠다는 의미다.

데코레이터 부분은 <app-hello></app-hello>태그를 사용하여, 장식하겠다는 의미인데 템플릿Url 경로에 있는 html파일이 <app-hello></app-hello> 태그안에 들어간다. 앵글러를 사용하여 싱글 페이지를 만들 수 있는 이유가 바로 여기에 있다. 

위의 코드에서는 templateUrl을 사용하여 모듈처럼 파일을 외부에 뒀지만, 아래처럼 백틱 기호( ` ` )를 사용하여 직접 입력할 수도 있다. 

---

template:  ` 

 <p>

hello-angular-wordl !

 </p>

`

---

CSS파일은 template 경로에 지정한 html파일을 꾸며주는 역할을 한다. 앵글러에서 CSS의 특이점은, '스타일 캡슐화'를 지원하는 데에 있다. '스타일 캡슐화'는, 지정한 컴포넌트 이외의 컴포넌트에는 CSS가 적용되지 않는다는 의미다. 

3 컴포넌트 로딩

src폴더 아래의 app폴더가 바로 <app-root></app-root>태그에 해당하는 템플릿이 있는 폴더이다. app폴더에 있는 app.component.html파일을 열어보자.

angular를 첫 실행했을 때, angular 블로그나 해당 사이트로 연결되는 코드들이 보인다. 

빨간 부분이 있는 코드를 삭제하고, 위에서 생성한 <hello></hello> 태그를 넣어보자. 

``<app-hello></app-hello>``는 component의 decorator에서 지정한 태그 이름이다.

<app-hello>태그에 로딩되는 템플릿 파일은, hello.component.html이다. hello.component.html 파일을 아래처럼 변경해보자. 

컴포넌트의 템플릿(hello.component.html)의 내용이 아래와 같이 랜더링된다.