Angular | Component

앞선 글에서 설명되어있지만... 다시 한번!

앵귤러에서의 Component

웹 어플리케이션의 뷰를 담당한다. 뷰는 내용(content)과 구조(structure)를 담당하는 HTML과 스타일(디자인, 레이아웃)을 담당하는 CSS, 마지막으로 DOM과 이벤트를 관리하기 위한 JavaScript가 필요하다.

Component는 위의 "HTML, CSS,JS"를 하나의 단위로 묶은 것이다.

여기에서 W3C표준인 '웹 컴포넌트'의 개념도 알아야하지만....깊은건 일단 대략적인걸 다 알고나서 들어가자.

Component 예시

//임포트 영역
import { Component, OnInit } from '@angular/core';


//@Component 데코레이터 영역
@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.scss']
})

//컴포넌트 클래스 영역
export class TodosComponent implements OnInit {

  newText='';
  todos: {
    done:boolean,
    text: string
  }[]

  constructor() {
    this.todos = [
      { done:false, text:'운동하기'},
      { done: true, text: '공부하기'}
    ];
   }

  ngOnInit(): void {
  }

  toggleTodo(todo){
    todo.done = !todo.done
  }
  addTodo(newText: string){
    this.todos.push(
      {
        done:false,
        text: newText
      }
    );
    this.newText = '';
  }

}

• 임포트 영역

• @Component 데코레이터 영역
  : 메타데이터를 객체로 전달
  : 메타데이터는 컴포넌트 생성에 필요한 정보(셀렉터, HTML템플릿, CSS 등)을 담는다.
  : 각 프로퍼티의 해당 파일의 경로 값을 가지고 있다.

• 컴포넌트 클래스 영역
  : 뷰 관리를 위한 로직을 담는 클래스를 정의한다.
  : 컴포넌트 클래스는 컴포넌트의 내부 관심사인 뷰 관리에 집중!
  => 🌟 애플리케이션 공통 관심사는 서비스로 분리해야한다. 🌟
  : @Component 바로 아래에 위치해야한다. 데코레이터와 데코레이터가 장식하는 클래스 사이에는 어떤 것도 있어서는 안된다.
  (why? @Component 데코레이터는 자신의 바로 아래에 위치한 클래스를 컴포넌트 클래스로 인식하기 때문이다.)

컴포넌트 작성

• 컴포넌트는 n g c component-name 이나 직접 파일을 생성하여 추가할 수 있다.

• 컴포넌트는 화면 전환(라우팅)의 단위가 된다. → 폴더로 구분하는 것이 바람직!!

네이밍 컨벤션

For 유지보수와 가독성!

[Angular Style Guide 권장 네이밍 패턴]
기능을 명학히 설명하는 구성요소의 이름.구성요소 타입.ts

컴포넌트 클래스

//컴포넌트 클래스 영역
export class TodosComponent implements OnInit {
  ...
}

컴포넌트 클래스의 이름은 파일명을 기반으로 카멜 표기법 을 쓰는 것이 좋다!

@Component 데코레이터

@Component 데코레이터를 해당하는 클래스 바로 앞에 호출하여 해당하는 클래스가 일반 클래스가 아닌 컴포넌트 클래스임을 알린다.

→ 컴포넌트 클래스는 @Component 데코레이터 바로 아래에 작성한다.

메타데이터

@Component의 또 하나의 역할 → 컴포넌트의 설정 정보를 담고있는 메타데이터 객체를 인자로 전달받아서 컴포넌트 클래스에 반영하는 것!

//@Component 데코레이터 영역
@Component({
 selector: 'app-todos',
 templateUrl: './todos.component.html',
 styleUrls: ['./todos.component.scss']
})