Angular | Component

권기현·2020년 7월 22일
0

Angular

목록 보기
2/4
post-thumbnail

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

앵귤러에서의 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']
})
profile
함께 일하고 싶은 개발자를 목표로 매일을 노력하고, 옷을 좋아하는 권기현 입니다.

0개의 댓글