[Angular] Component의 구조, 사용방법

✔ 참고한 책 : Angular Essentials(이웅모 지음)

✔ 예제에 사용한 앵귤러 버전 :

Angular CLI: 12.2.7
Node: 14.17.3
Package Manager: npm 6.14.13
OS: win32 x64

---

Angular는 컴포넌트(Component)단위로 구성됩니다.

📌컴포넌트란

컴포넌트는 앵귤러의 구성요소 중 하나로, 화면을 구성하고 관리하는 역할을 합니다.
단순히 뷰 뿐만이 아니라 기능이 있고 동작이 가능한 부품이라고 할 수 있습니다.
그러기 위해 각각의 컴포넌트들은 HTML, CSS, JavaScript를 하나로 묶습니다.

컴포넌트는 부품이기 때문에 재사용이 가능합니다. 그러므로 화면을 구성할때 화면 하나에 컴포넌트 하나를 1:1 통으로 매칭하는것 보다는 재사용성을 생각한 설계로 분할해서 코드를 작성해야합니다.

먼저 프로젝트를 생성했을때 자동으로 만들어지는 루트 컴포넌트를 확인해봅니다

루트 컴포넌트는 src아래의 app 폴더에 있습니다.

여기서 app.component.ts 를 보면 크게 3가지 영역으로 나뉘어져 있습니다.


📁src/app/hello/hello.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'hello-app';
}

✅import

컴포넌트에 필요한 의존모듈을 import합니다. Angular모듈의 경우 @가 붙어있고 경로를 명시하지 않습니다. npm도 경로를 명시하지 않으며 나머지는 상대경로를 명시해야 합니다.

✅@Component

@Component 데코레이터는 컴포넌트 생성에 필요한 메타데이터 객체를 전달합니다.
@Component 데코레이터는 자신의 아래에 있는 클래스를 컴포넌트 클래스로 인식하기 때문에 @Component 데코레이터와 컴포넌트 클래스 사이에는 아무것도 없어야 합니다.

✔️selector 프로퍼티

html에 작성할 태그 이름으로 컴포넌트의 뷰를 표현할 때 사용합니다. 이름을 지을때는 다른 애플리케이션과의 충돌을 막기 위해서 app접두사가 자동으로 붙습니다. 접두사 변경은 프로젝트를 생성할때 --prefix 옵션을 추가하면 됩니다. 기본적으로 angular.json 파일에서 app이 디폴트 설정 되어있는 것을 확인할 수 있습니다.

✔️template/templateUrl 프로퍼티

컴포넌트의 뷰를 선언하는 프로퍼티입니다.
관리할 뷰가 복잡하지 않다면 template을 사용하여 ` (백틱) 으로 감싼 코드를 작성하여 생성합니다. 뷰가 간단하지 않다면 templateUrl에 사용할 html 템플릿의 경로를 적어줍니다.

✔️styles/styleUrls 프로퍼티

위에서 선언한 뷰의 스타일을 지정하기 위한 프로퍼티 입니다.
styleUrls에는 외부 CSS파일의 상대경로를 배열로 지정해 여러개의 스타일 파일을 적용할 수 있습니다. styles을 이용하여 외부 파일을 이용하지 않고 바로 문자열의 형태로 작성할 수도 있습니다.

✅export class

뷰를 관리하기 위한 로직을 담고있는 컴포넌트 클래스를 정의합니다. 컴포넌트의 뷰 관리를 하는것이며 애플리케이션 공통 관심사는 서비스로 분리합니다.

📌컴포넌트 생성 & 사용 방법

컴포넌트의 생성은 아래의 명령어로 생성합니다.
src/app아래에서 ng generate component 실행

이 명령어는 ng g c 로 축약이 가능합니다.
만든 hello 컴포넌트를 살펴보겠습니다.


📁src/app/hello/hello.component.ts

import { Component } from '@angular/core';
@Component ({
	selector: 'app-hello',
  	template: `
		<h2>미래의 앵귤러 천재되기^^</h2>
		<p>예비천재: {{name}}</p>
		<input type='text' placeholder="이름을 입력해주세요." #inputYourName>
		<button (click)="setName(inputYourName.value)">등록</button>
		  `,
  	styles:[`...`]
})
export class HelloComponent {
 name: string;
  
  setName(name:string) {
   this.name = name; 
  }
}

컴포넌트를 사용할때는 selector에 지정한 app-hello 태그로 루트 컴포넌트의 템플릿(app.component.html)에서 불러내 사용할 수 있습니다.

1. #inputYourName은 템플릿 참조변수이며 DOM요소에 대한 참조로 변수처럼 사용합니다.

2. 그런 참조변수를 setName(inputYourName.value) 함수에 매개변수로 사용하면 컴포넌트 클래스에 있는 setName() 을 호출하여 참조변수의 value가 인자로 전달되어 컴포넌트 클래스의 프로퍼티 name은 입력한 값이 됩니다.

3. 컴포넌트 클래스의 name 프로퍼티에 저장된 값은 템플릿 문법을 사용하여 {{name}}에 들어갑니다.
   
   
   이런식으로 컴포넌트의 템플릿과 클래스는 서로 연동됩니다.
   컴포넌트를 작성했다면 루트 모듈에 등록하여 사용하면 됩니다.
   
   
   
   

📌컴포넌트 모듈에 등록하기

📁src/app/app.module.ts

	import { BrowserModule } from '@angular/platform-browser';
	import { NGModule } from '@angular/core';
	
	import { AppComponent } from './app.component';
	import { HelloComponent } from './hello/hello.component';

	@NGModule({
    	declarations: [
        	AppComponent,
          	HelloComponent
        ],
        imports: {BrowserModule},
        providers: [],
        bootstrap: [AppComponent]
    })
	export class AppModule { }

1. 등록할 컴포넌트의 클래스를 import 합니다.

2. @NGModule({}) 안의 declarations 프로퍼티는 모듈에 소속될 구성요소들을 등록하는 프로퍼티입니다.

---