▶[Angular Guide] 2. Architecture - (2) Component

▶[Angular Guide] 2. Architecture - (2) Component

---

이 글에서는 [Angular Guide] Architecture 의 여덟 항목 중 Component에 대한 내용을 정리하고자 한다.

Component 

---

Component는 'view'라고 불리는 화면 중 일부분을 컨트롤하는 역할을 한다. 예를들어, 다음과 같은 view 들이 component에 의해 컨트롤되는 것들이다.

• The app root with the navigation links.

• The list of heroes.

• The hero editor.

사용자가 화면을 통해서 보게될 'view' 영역을 컨트롤하는 것이 Component 라고 했을때. 사실, Application에서의 Component의 기능과 역할은 아래의 그림에서 보다 쉽게 이해할 수 있다.

위 사진과 같이, Angular로 제작하는 Applicaiton은 여러 Component의 조합으로 구성되어있다고 말할 수 있다. 

(그래서) 우리가 Component 로 어떤 것들을 해야하는 것일까.

---

위에서 Component의 기본적인 개념을 살펴봤다면, 아래에서는 Component가 Application안에서 어떤 역할을 하며, 그에따라 우리는 어떤 관점에서 이것을 이해하는지에 대해서 정리해보려고 한다.

우리는 Component의 application logic을 class 안에서 정의할 수 있다. (이 Component가 view의 어떤 부분을 support할지에 대한 것들)

class는 API의 properties와 methods 를 통해 view와 상호작용(interact)한다.

이에대한 내용을 Angular에서 제공하는 코드와 함께 살펴보기로하자.

• HeroListComponent는 heroes 라는 속성(property)을 가지고 있다. 

• 이 heroes property은 service에서 정의해둔 내용에따라 얻은 heroes 배열을 리턴한다. 
  
  

• HeroListComponent는 selectHero() 라는 method를 가지고있다. 

• 이 selectHero()라는 method는 사용자가 hero list에서 hero 하나를 선택 할 때,  selectedHero 라는 속성을 설정한다.

이에대한 실제 코드 내용은 다음과 같다.

 app/hero-list.component.ts (class) 

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

• 이 heroes property은 service에서 정의해둔 내용에따라 얻은 heroes 배열을 리턴한다. 
  

• this.heroes = this.servcie.getHeroes(); //service에서 정의해둔 내용을 바탕으로 설정된다.
  
  

• 이 selectHero()라는 method는 사용자가 hero list에서 hero 하나를 선택 할 때,  selectedHero 라는 속성을 설정한다.

• this.selectedHero = hero;

Angular는 사용자가 application을 돌아다니면서 하는 행동에 따라 Component를 생성하기도하고, 업데이트도하며 파괴(destroy)하기도 한다. 또한 app에서 우리는 위 예제 코드에서 ngOnInit()을 선언한 것 처럼, 각 순간 또는 상황에 맞추어 action을 부여할 수 도있다. 

angular.io > lifecylce hooks DOCS

​