앵귤러 튜토리얼(Angular tutorial) - 7 : 컴포넌트, 모듈

저번시간에는 컴포넌트와 모듈과의 관계에 대해서 살펴보았습니다.
이번시간에도 컴포넌트와 모듈에 대해서 살펴보겠습니다.

모듈은 화면을 관리하는 여러개의 컴포넌트를 가질 수 있었습니다.

앞시간에서 app.component.ts와 hello.component.ts를 통해서 살펴보았습니다.

프로젝트에서 main.ts라는 파일을 찾은뒤에 더블클릭 해 봅니다.

왼쪽이 main.ts라는 파일입니다.

 

내용을 전부 이해할 수 없지만 bootstrapModule 이라는 함수에 AppModule이라는 클래스가 사용되는 것을 볼 수 있습니다.
자세히보면 AppModule의 클래스 이름은 app.module.ts 파일에 사용된 클래스 이름 입니다!
우리가 여태껏 살펴본 모듈이 main.ts 라는 곳에 사용되었습니다.

main.ts파일은 앵귤러 프로젝트가 실행 될 때 가장먼저 동작하는 곳 입니다.

main.ts파일에서 bootstrapModule의 함수 의미는 앵귤러 프로젝트가 동작 할 때 가장먼저 사용할 모듈이 무엇인지 써 주는 곳 입니다.

 

다시말해, 앵귤러에서 main.ts에 사용된 모듈은 가장 먼저 처음 동작하는 모듈을 의미합니다.
마찬가지로, 우리가 앞시간에서 살펴몬 모듈에서 bootstrap은 가장 먼저 동작할 컴포넌트를 의미합니다.
가장 먼저 동작할 모듈은 main.ts에서 bootstrapModule함수에 클래스명을 넣어주면 되고, 
가장 먼저 동작할 컴포넌트는 main.ts에서 등록한 가장 먼저 동작할 모듈의 bootstrap에 해당 컴포넌트를 넣어주면 됩니다.

main.ts파일에서 가장 먼저 동작할 모듈을 선택 할 수 있습니다.

 

가장 먼저 동작할 모듈은 우리는 "앱모듈" 이라고 편의상 부르겠습니다. 
마찬가지로 "앱모듈"에서 가장 먼저 동작 할 컴포넌트를 편의상 "앱컴포넌트" 라고 하겠습니다.

이러한 앱모듈, 앱컴포넌트는 앵귤러에서 가장 먼저 동작하는 역할을 한다는 것을 꼭 기억하여야 합니다.
앱모듈과 앱컴포넌트는 사실 직접적으로 화면과 관련된 내용을 작성하는 것 보다는 중간 역할을 하는 데 조금 더 사용됩니다.
이해를 위해 컴포넌트 1개를 더 만들어 보겠습니다.
프로젝트 폴더로 이동합니다. world라는 컴포넌트를 만들어 보겠습니다.

ng g component world 

새로운 컴포넌트를 만들었습니다.

 

world 컴포넌트의 셀렉터 이름을 살펴보니 app-world로 되어있습니다.
해당 셀렉터를 복사한 뒤에 앱컴포넌트(app.component.html) html 파일에 붙여넣습니다.
앱컴포넌트html 파일에서 기존에 있던 내용을 전부 제거하고 아래처럼 바꾸도록 합니다.

<app-hello></app-hello>
<br>
<app-world></app-world>

그리고 해당내용을 ng serve 를 통해 실행하여봅니다.

2개의 컴포넌트가 앱컴포넌트 html 파일에 의해서 나타났습니다.

 

그리고 앱컴포넌트파일의 내용을 전부 제거하고 boolean 타입의 논리값 1개만 남겨두도록 합니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    visible : boolean = true;
}

 

방금 수정하였던 앱컴포넌트html 파일에서 if 디렉티브를 사용하여 수정 해 봅니다.

<app-hello></app-hello>
<br>
<app-world *ngIf="visible"></app-world>

 

앞시간에서 미처 소개하지는 못하였지만, if디렉티브는 해당 변수의 값이 참이면 실행, 거짓이면 실행되지 않는 기능입니다.

앵귤러에서의 디렉티브는 다음번에 좀 더 살펴보겠습니다.
앱컴포넌트에서 visible 변수의 값을 false로 바꾸어 봅니다.

false 값으로 바꾸니 world 컴포넌트가 보이지 않습니다!!!

 

값을 바꾸고 나니 world 컴포넌트가 나오지 않는 것을 볼 수 있습니다!
벌써 우리는 조건에 따라서 화면을 나오거나 나오지 않게 하는 기능을 만들었습니다.
이러한 방법을 활용하면 특정 요청에 대해서 다양한 화면을 보여줄 수 있을 것 입니다.

 

정리하여보겠습니다.
1. 모듈은 여러개의 컴포넌트를 가질 수 있습니다. 이러한 컴포넌트를 관리해 주는 것을 모듈이라고 합니다.
2. 컴포넌트는 화면을 담당합니다. 화면을 구성하며 다양한 동작을 합니다.

3. 가장 먼저 동작하는 모듈은 main.ts파일의 bootstrapModule에 등록합니다.
4. 모듈에서 가장 먼저 동작하는 컴포넌트는 bootstrap에 등록 합니다.
5. 자신이 만든 컴포넌트를 추가/동작하려면, 해당 컴포넌트의 셀렉터의 내용을 html 테그 형식으로 bootstrap에서 사용된 컴포넌트에 추가 하여야 합니다.

 

모듈에서 먼저 사용되는 컴포넌트는 일반적으로 화면과 관련된 기능보다는 다른 컴포넌트를 등록하는데 사용되어집니다.
이러한 방식으로 모듈이 다양한 컴포넌트를 등록해서 여러 조건에 대해 원하는 html 화면만 보여질 수 있도록 하는 것 입니다!
* 물론 나중에 router를 살펴볼 예정입니다..^^

여기까지 모듈과 컴포넌트의 관계에 대해서 조금 더 자세히 설명하여 보았습니다.
위 내용이 이해가 가지 않는다면 여러번 살펴보아 이해를 반드시 하여야 합니다. ㅠ
다음장에서는 이러한 컴포넌트의 사용 기법에 대해서 살펴보도록 하겠습니다.

 

src.zip

0.01MB