01.Module and Component.md

01. Module and Component

Module 모듈

각종 설정과 관련된 내용이 존재하는 파일

Componnet 컴포넌트

모듈이 만들어준 환경에서 동작하여 실제 화면에 관한 내용을 직접적으로 수행하는 파일

모듈이라는 파일을 활용하여 각종 기능에 대한 규칙, 필요한 라이브러리 및 정보등을 관리한다. 컴포넌트라는 파일에서는 html파일에서의 각종 이벤트에 대한 내용, 데이터에 대한 처리를 한다.

html 파일에서의 script 태그에 기록된 다양한 함수, 객체등을 앵귤러에서 역할과 종류를 분리해 놓은 개념이 바로 모듈과 컴포넌트다.

컴포넌트에 대해 먼저 알아보자 🏃‍♂️

모듈: 설정 내용

컴포넌트 : 이벤트 수행

컴포넌트는 앵귤러에서 화면구성 및 각종 이벤트에 대해서 일을 수행하는 일꾼이다.

컴포넌트를 찾아보려면 프로젝트 firstStudy에서 src -app 탭까지 이동한 뒤에 app.component.ts 파일을 선택하면 볼 수 있다.

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

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

  constructor (){
    console.log('Hi');
  }
}

@Component라는 부분을 살펴보자

앵귤러에서 컴포넌트는 class 파일에 @Component 라는 부분을 살펴 볼 필요가 있다.

앵귤러에서 Component는 class 파일에 @Component라는 데코레이터가 붙여진 파일을 의미한다.

데코레이터는, 앵귤러에서 사용되는 일종의 명령어(예약어)이며, 해당 파일이 앵귤러에서 특수한 기능으로 사용되는 파일임을 알려준다.

그러므로 @Component 기호는 "컴포넌트 데코레이터"이다. 즉 @Component 기호가 붙어있는 class 파일은 앵귤러에서 컴포넌트를 의미한다.

컴포넌트를 변경하니 웹 화면이 바뀌었다.

화면구성과 관련된건 컴포넌트에서 ~!

참조

앵귤러 튜토리얼(Angular tutorial) - 3 : 기본 구조