컴포넌트와 디렉티브는 생명주기를 갖습니다. 이 생명주기는 컴포넌트와 디렉티브가 생성하고 소멸되기까지의 여러 과정을 말하며 Angular에 의해 관리됩니다.

다시 말해 Angular는 생명주기를 통해 컴포넌트와 디렉티브를 생성하고 렌더링하며, 프로퍼티의 변화를 체크하고 DOM에서 제거하는 일련의 과정을 관리합니다. 개발자는 Angular가 제공하는 생명주기 훅 메소드를 구현하여, 각각의 생명주기 단계에서 처리하여야 할 행위를 정의할 수 있습니다.

Angular는 위 그림의 순서대로 생명주기를 관리하고, 생명주기 이름 앞에 ng가 붙은 생명주기 훅 메소드를 제공합니다.

1. 생명주기 훅 메소드

생명주기 훅 메소드는 인터페이스의 형태로 제공됩니다.

예를 들어 OnInit 생명주기에 처리되어야 할 행위를 정의하기 위해서는 훅 메소드 ngOnInit를 구현합니다. 이 ngOnInit 메소드는 추상 메소드이며 OnInit 인터페이스에 포함되어 있습니다.

interface OnInit {
    ngOnInit(): void
}

이와 같이 생명주기(OnInit)에는 동일한 이름의 인터페이스(OnInit)가 존재합니다. 그리고 이 인터페이스는 생명주기 이름 앞에 ng 접두어가 붙은 추상메소드 (ngOnInit)를 포함합니다.

생명주기 (OnInit)에 처리되어야 할 행위를 정의하려면, 생명주기 인터페이스 (OnInit)의 추상메소드(ngOnInit)를 구현해야 합니다.

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

...
export class AppComponent implements OnInit {
    name = 'Lee';

    constructor() { }

    // 생명주기 OnInit 단계에 실행할 처리를 구현한다.
    ngOnInit() {...}
}

컴포넌트와 디렉티브는 클래스이므로 constructor의 호출에 의해 생성됩니다. 그 이후, Angular는 특별한 시점에 구현된 생명주기 훅 메소드를 호출합니다.

물론 모든 생명주기 훅 메소드를 구현할 필요는 없습니다. 특정 생명주기에 처리해야 할 행위가 있을 때, 필요한 생명주기 훅 메소드만 구현하면 됩니다. 각각의 생명주기 훅 메소드가 어떤 시점에 호출되는지 알아봅시다.

1) ngOnChanges

부모 컴포넌트에서 자식 컴포넌트의 입력 프로퍼티(@Input)로 바인딩한 값이 초기화 또는 변경되었을 때 실행됩니다. 따라서 컴포넌트에 입력 프로퍼티가 없을 때는 호출할 필요가 없습니다.

class MyComponent implements OnChanges {
    @Input() props1: number;
    @Imput() props2: string;

    ngOnChanges(changes: SimpleChanges) {
        // changes는 모든 입력 프로퍼티의 이전 값과 현재 값을 포함한다.
        console.log(changes);

        /*
        { prop1: SimpleChange, prop2: SimpleChange}
            prop1: SimpleChange {previousValue: undefined, currentValue: 100, firstChange: true}
            prop2: SimpleChange {previousValue: undefined, currentValue: "string", firstChange: true}
        */
        }
    }

ngOnChanges는 ngOnInit 이전에 입력 프로퍼티가 존재하는 경우, 최소 1회 호출됩니다. 이후에는 입력 프로퍼티가 변경될 때마다 반복 호출됩니다. (이때의 변경은 입력 프로퍼티의 참조 변경을 말합니다.) 다시 말해 기본 자료형의 값이 재할당되없을 때와 객체의 참조가 변경되었을 때만 반응합니다.

ngOnChanges는 입력 프로퍼티의 참조 변경에만 반응하므로, 입력 프로퍼티가 아닌 일반 컴포넌트 프로퍼티의 내용이 변경되었을 때는 반응하지 않습니다.

ngOnChanges 메소드는 입력 프로퍼티의 변경 정보를 담고있는 simpleChanges 객체를 인자로 전달받을 수 있습니다. 이 객체는 모든 입력 프로퍼티의 이전 값과 현재 값을 포함합니다.

2) ngOnInit

ngOnChanges 이후, 입력 프로퍼티를 포함한 모든 프로퍼티의 초기화가 완료된 시점에 한번만 호출됩니다.

constructor는 TypeScript 클래스의 메소드로서 인스턴스 생성을 위해 호출됩니다. Angular에서 constructor는 의존성 주입을 위해 사용되기도 하지만, Angular의 생명주기와 직접적인 관계는 없습니다.

⚠️ TypeScript에서는 constructor에서 프로퍼티를 초기화하는 것이 일반적이지만, Angular에서 프로퍼티의 초기화 처리는 contructor가 아닌 ngOnInit에서 수행하는 것이 좋습니다.

간단한 값으로 프로퍼티를 초기화하는 것은 문제가 되지 않지만, 서버에서 데이터를 가져와 할당하는 것과 같이 복잡한 처리는 constructor가 아닌 ngOnInit에서 수행해야 합니다.

• (참고)Constructor에서 복잡한 처리를 피해야 하는 이유 : http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/

constructor가 실행되는 시점에 Angular에서 관리하는 입력 프로퍼티는 초기화되기 이전의 상태이며 undefined가 반환됩니다. 만일 이 시점에 입력 프로퍼티를 사용한다면 의도하지 않은 결과가 발생하기 때문에 주의해야 합니다.

ngOnInit에서는 입력 프로퍼티의 참조가 보장되야 합니다. 입력 프로퍼티의 초기화는 ngOnChanges에서 처음 수행되지만, ngOnChanges는 입력 프로퍼티가 변경될 때마다 반복 호출됩니다. 따라서 프로퍼티 초기화를 수행하기에 가장 적당한 훅 메소드는 ngOnInit입니다.

3) ngDoCheck

ngOnInit 이후, 컴포넌트 또는 디렉티브의 모든 상태 변화가 발생할 때마다 호출됩니다. 다시 말해 변화 감지(Change Detection) 로직이 실행될 때 호출됩니다.

ngDoCheck는 Angular의 변화 감지에 의해 감지되지 않거나 감지할 수 없는 변경 사항을, 수동으로 더티 체크(dirty check)하기 위해 사용합니다. 커스텀 더티 체크를 통해 사용자 변화 감지 로직을 구현하기 위해서는 Angular가 제공하는 KeyValueDiffers와 IterableDiffers를 사용합니다.

⚠️ 하지만 ngOnCheck는 모든 상태 변화가 발생할 때마다 매번 호출되기 때문에 성능에 악영향을 줄 수 있습니다. 가장 바람직한 것은 Angular의 변화 감지가 상태 변화를 감지하도록 코드를 구현하는 것이지만, ngDoCheck를 사용할 수밖에 없는 상황이라면 최대한 가벼운 처리로 성능에 무리를 주지 않도록 주의하여야 합니다.

ngOnChanges는 입력 프로퍼티에 바인딩된 값이 초기화 또는 변경(기본 자료형의 값이 재할당되었을 때와 객체의 참조가 변경)되었을 때만 반응하여 호출되지만, ngDoCheck는 모든 상태의 변경에 의해 호출됩니다. ngOnChanges와 ngDoCheck의 차이점에 대해서는 뒤에서 보다 자세히 살펴보도록 합시다.

4) ngAfterContentInit

ngContent 디렉티브를 사용하여 외부 콘텐츠를 컴포넌트의 뷰에 콘텐트 프로젝션한 이후 호출됩니다. 첫 번째 ngDoCheck 호출 이후에 한 번만 호출되며, 컴포넌트에서만 동작하는 컴포넌트 전용 훅 메소드입니다.

👉 콘텐츠 프로젝션 (Content Projection)

부모 컴포넌트가 자식 컴포넌트에게 부모 컴포넌트의 템플릿 일부를 전달하는 기능.
(@ContentChild, @ContentChildren)

콘텐츠 프로젝션에 의해 부모 컴포넌트가 전달한 부모 컴포넌트의 템플릿 조각을 체크한 후 호출됩니다. ngAfterContentInit 호출 이후, ngDoCheck가 호출된 이후에 호출되며 컴포넌트에서만 동작하는 컴포넌트 전용 훅 메소드 입니다.

6) ngAfterViewInit

컴포넌트의 뷰와 자식 컴포넌트의 뷰를 초기화한 이후 호출됩니다. 첫 번째 ngAfterContentChecked 호출 이후 한 번만 호출되며 컴포넌트에서만 동작하는 컴포넌트 전용 훅 메소드 입니다.

7) ngAfterViewChecked

컴포넌트의 뷰와 자식 컴포넌트의 뷰를 체크한 이후 호출됩니다. 첫 번째 ngAfterViewInit 호출 이후, ngAfterContentChecked 호출 이후 호출되며 컴포넌트에서만 동작하는 컴포넌트 전용 훅 메소드입니다.

8) ngOnDestroy

컴포넌트와 디렉티브가 소멸하기 이전 호출됩니다. RxJs의 unsubscribe 등 메모리 누수를 방지하기 위한 코드 등을 정의합니다.

2. 생명주기 훅 메소드 실습

예제를 통해 훅 메소드가 실제로 동작하는 것을 살펴보며, 각각의 호출 시점과 용도에 대해 알아보도록 합시다. (실습 사이트 : https://stackblitz.com/edit/lifecycle-hooks-exam)

부모 컴포넌트

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

@Component({
    selector: 'app-root',
    template: `
        <button (click)="status = !status">
            {{ status ? 'Destroy Child' : 'Create Child' }}
        </button>
        <app-root *ngIf="status" [prop]="prop"></app-child>
        `
    })
    export class AppComponent {
        status = false;
        prop = 'Hello';
    }

자식 컴포넌트를 아래와 같이 작성합니다. 자식 컴포넌트는 @Input 데코레이터를 사용하여 부모 컴포넌트로부터 상태를 전달받습니다. 생성자 함수와 모든 생명주기 훅 메소드를 구현하여 훅 메소드의 호출 여부를 확인하여 봅시다.

자식 컴포넌트

import { Component, Input, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>child component</p>
    <p>부모 컴포넌트가 전달한 값: {{ prop }}</p>
  `
})
export class ChildComponent implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() prop: string;

  constructor() {
    console.log('[construnctor]');
    console.log(`prop: ${this.prop}`);
    this.prop = 'TEST';
    console.log(`prop: ${this.prop}`);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('[OnChanges]');
    console.log(`prop: ${this.prop}`);
    console.log('changes:', changes);
  }

  ngOnInit() {
    console.log('[OnInit]');
    console.log(`prop: ${this.prop}`);
  }

  ngDoCheck() {
    console.log('[DoCheck]');
  }

  ngAfterContentInit() {
    console.log('[ngAfterContentInit]');
  }

  ngAfterContentChecked() {
    console.log('[ngAfterContentChecked]');
  }

  ngAfterViewInit() {
    console.log('[ngAfterViewInit]');
  }

  ngAfterViewChecked() {
    console.log('[ngAfterViewChecked]');
  }

  ngOnDestroy() {
    console.log('[ngOnDestroy]');
  }
}

[Create Child] 버튼을 클릭하면 자식 컴포넌트가 생성되면서 훅 메소드가 순차적으로 호출됩니다. 버튼 클릭 후 콘솔에 출력되는 결과는 다음과 같습니다.

[Constructor]
prop: undefined
prop: TEST

[OnChanges]
prop: Hello
changes: {prop: SimpleChange}
prop: SimpleChange {previousValue: undefined, currentValue: "Hello", firstChange: true"
__proto__: Object

[OnInit]
prop: Hello

[DoCheck]

[ngAfterContentInit]

[ngAfterContentChecked]

[ngAfterViewInit]

[ngAfterViewChecked]

가장 먼저 constructor가 호출됩니다.

constructor는 인스턴스 생성을 위해 호출되며 Angular가 관리하는 메소드가 아닙니다. constructor에서 입력 프로퍼티를 참조하면 undefined가 출력되는데, 이는 입력 프로퍼티의 초기화가 OnChanges에서 완성되기 때문입니다. 따라서 위 예제처럼 constructor에서 입력 프로퍼티를 초기화하는 것은 무의미한 행위이며 해서도 안됩니다.

ngOnChanges는 자식 컴포넌트에 입력 프로퍼티가 존재하기 때문에 실행되었습니다. 만약 자식 컴포넌트에 입력 프로퍼티가 존재하지 않으면 ngOnChanges는 호출되지 않습니다. 이후 OnInit, DoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked가 순차적으로 호출되는 것을 확인할 수 있습니다.

이제 생성된 자식 컴포넌트를 소멸시켜 봅시다. [Destroy Child] 버튼은 ngIf에 false를 할당하여 자식 컴포넌트를 소멸시킵니다. [Destroy Child] 버튼을 클릭하면 ngOnDestroy가 호출되는 것을 확인할 수 있습니다.

ngOnChanges와 ngDoCheck

ngOnChanges와 ngDoCheck는 모두 상태 변화와 관계가 있습니다. 하지만 ngOnChange는 입력 프로퍼티의 초기화, 입력 프로퍼티의 참조 변경 시에 호출되고, ngOnCheck는 모든 상태 변화 시점, 즉 변화 감지 로직이 실행될 때 호출됩니다.

하지만 객체의 경우, 프로퍼티의 값을 변경하여도 객체의 참조는 변경되지 않기 때문에 ngOnChanges는 이 변화에 반응하지 않습니다. 즉, 기본 자료형이나 불변 객체와 같이 이뮤터블한 값에만 반응합니다.

아래에서 실습을 통해 확인해 봅시다. (실습 사이트 : https://stackblitz.com/edit/lifecycle-hooks-ngonchanges-ngdocheck)

부모 컴포넌트

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="status = !status">
      {{ status ? 'Destroy Child' : 'Create Child' }}
    </button>
    <div *ngIf="status">
      <button (click)="immutable='HELLO'">
        기본자료형 프로퍼티 변경
      </button>
      <button (click)="mutable.name='kim'">
        객체형 프로퍼티 변경
      </button>

      <app-child 
        [immutable]="immutable" 
        [mutable]="mutable"></app-child>
    </div>
  `
})
export class AppComponent {
  status = false;

  immutable = 'Hello';
  mutable = { name: 'Lee' };
}

부모 컴포넌트의 버튼에 의해 자식 컴포넌트가 생성 소멸하도록 ngIf 디렉티브를 사용하도록 합니다. 자식 컴포넌트가 생성된 이후 2개의 버튼이 나타나는데, 이 버튼이 변경하고 전달하는 값은 이뮤터블한 값과 뮤터블한 값입니다.

자식 컴포넌트

import { Component, Input, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>child component</p>
    <p>부모 컴포넌트가 전달한 값: {{ immutable }}</p>
    <p>부모 컴포넌트가 전달한 값: {{ mutable | json }}</p>
  `
})
export class ChildComponent implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() immutable: string;
  @Input() mutable: object;
  prop = 'normal prop';

  constructor() {
    console.log('[construnctor]');
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('[OnChanges]');
    console.log(`changes:`, changes);
    console.log(`immutable: ${this.immutable}`);
    console.log(`mutable:`, this.mutable);
  }

  ngOnInit() {
    console.log('[OnInit]');
    console.log(`prop: ${this.prop}`);
    console.log(`immutable: ${this.immutable}`);
    console.log(`mutable:`, this.mutable);
  }

  ngDoCheck() {
    console.log('[DoCheck]');
    console.log(`immutable: ${this.immutable}`);
    console.log(`mutable:`, this.mutable);
  }

  ngAfterContentInit() {
    console.log('[ngAfterContentInit]');
  }

  ngAfterContentChecked() {
    console.log('[ngAfterContentChecked]');
  }

  ngAfterViewInit() {
    console.log('[ngAfterViewInit]');
  }

  ngAfterViewChecked() {
    console.log('[ngAfterViewChecked]');
  }

  ngOnDestroy() {
    console.log('[ngOnDestroy]');
  }
}

자식 컴포넌트는 @Input 컴포넌트를 사용하여 부모 컴포넌트로부터 상태를 전달받습니다. 이때 전달된 값의 타입에 따라 다르게 동작하는 것을 확인할 수 있습니다.

• 👉 기본 자료형 프로퍼티 변경

첫번째 <기본 자료형 프로퍼티 변경> 버튼을 클릭하면 기본 자료형인 string타입의 값을 자식 컴포넌트에 전송합니다. 이때 자식 컴포넌트의 입력 프로퍼티 immutable에 새로운 값이 재할당됩니다.

입력 프로퍼티 immutable은 기본 자료형이므로 입력 프로퍼티 immutable의 값은 절대로 변경할 수 없습니다. 재할당 이전의 값인 문자열 "Hello"를 변경하는 것이 아니라, 새로운 문자열 "Hello"를 메모리에 생성하고 입력 프로퍼티 immutable은 이것을 가르킵니다.

즉, 재할당 시에 입력 프로퍼티 immutable이 가리키는 참조가 변경됩니다. 따라서 ngOnChanges가 호출됩니다.

첫 번째 <기본 자료형 프로퍼티 변경> 버튼을 클릭한 후 콘솔에 출력되는 결과는 다음과 같습니다.

[OnChanges]
changes: {immutable: SimpleChange}
    immutable:SimpleChange {previousValue: "Hello", currentValue: "HELLO", firstChange: false
immutable: HELLO
mutable: {name: "Lee"}

[DoCheck]
immutable: STRING
mutable: {name: "Lee"}

[ngAfterContentChecked]

[ngAfterViewChecked]

• 👉 객체형 프로퍼티 변경

두 번째 <객체형 프로퍼티 변경> 버튼을 클릭하면 객체의 프로퍼티값을 변경하여 자식 컴포넌트에 전송합니다. 이때 객체는 뮤터블 하므로, 객체의 프로퍼티값을 변경하도라도 참조가 변경되지 않습니다. 따라서 입력 프로퍼티가 변경되지 않은 것으로 간주되어 OnChanges가 호출되지 않습니다.

하지만 Angular의 변화 감지 로직은 실행되며 변화 감지 로직이 실행될 때 호출되는 ngDoCheck도 호출됩니다. 두 번째 <객체형 프로퍼티 변경> 버튼을 클릭한 후 콘솔에 출력되는 결과는 다음과 같습니다.

[DoCheck]
immutable: HELLO
mutable: {name: "kim"}

[ngAfterContentChecked]

[ngAfterViewChecked]

ngDoCheck는 모든 상태 변경에 의해 호출됩니다. 따라서 입력 프로퍼티뿐만 아니라 컴포넌트 프로퍼티가 변경되어도 호출됩니다. 예를 들어, 자식 컴포넌트 템플릿에 아래의 버튼을 추가하고 클릭하면 ngDoCheck는 호출됩니다.

<button (click)="prop=checked!">컴포넌트 프로퍼티 변경</button>

3. 디렉티브 생명주기 훅 메소드

디렉티브도 컴포넌트와 동일한 생명주기와 훅 메소드를 사용합니다. 다만, 뷰가 없는 디렉티브의 특성상 뷰에 관련한 생명주기는 디렉티브에 존재하지 않습니다.

뷰와 관련된 생명주기인 AfterViewInit, AfterViewChecked, AfterContentInit, AfterContentChecked는 디렉티브 생명주기에 존재하지 않는 컴포넌트 전용 생명주기 입니다.

따라서 디렉티브 생명주기에는 OnChanges, DoCheck, OnInit, OnDestroy만이 존재합니다.

컴포넌트는 Angular의 핵심 구성 요소로서 Angular 애플리케이션은 컴포넌트를 중심으로 구성됩니다. 컴포넌트의 역할은 애플리케이션의 화면을 구성하는 뷰(View)를 생성하고 관리하는 것이고 Angular는 컴포넌트를 조립하여 하나의 완성된 애플리케이션을 작성합니다. 컴포넌트는 컴포넌트 클래스와 템플릿으로 구성되는데,

• 컴포넌트 클래스는 애플리케이션 데이터와 로직을 처리하고
• 템플릿은 화면에 표시할 HTML을 정의합니다.

Angular 컴포넌트는 컴포넌트 클래스에 @Component 데코레이터를 사용해서 컴포넌트에 대한 메타데이터를 지정하면서 템플릿도 함께 지정하는 형태를 띄고 있습니다.

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

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.scss']
})

export class HelloComponent {
  // 여기서 로직과 데이터를 관리
}

👉 (참고) 컴포넌트 메타데이터

• selector: 컴포넌트 인스턴스가 DOM 트리의 어떤 자리에 위치할지 CSS 셀렉터로 지정합니다. Angular는 템플릿 HTML에 사용된 컴포넌트 셀렉터를 기준으로 컴포넌트의 인스턴스를 생성하기 때문에 컴포넌트에 CSS 셀렉터 를 지정해야 합니다.

• templateUrl: 컴포넌트의 HTML 템플릿을 외부 파일에 정의할 때, 이 템플릿 파일의 위치를 지정합니다. 템플릿을 인라인으로 구성하려면 이 프로퍼티 대신 template 프로퍼티를 사용하면 됩니다.

• providers: 컴포넌트가 생성될 때 의존성으로 주입되는 서비스의 프로바이더를 지정합니다.

View는 컴포넌트 메타데이터에서 지정하는 외부 템플릿 파일이나
인라인 템플릿이 컴포넌트 코드와 연결되면서 정의됩니다.
템플릿을 외부 파일에서 불러올지 컴포넌트 안에 포함시킬지는 메타데이터 설정에 의해 결정됩니다.
그리고 의존성으로 주입받아야 하는 서비스가 있다면 이 내용도 메타데이터에 지정할 수 있습니다.

컴포넌트 트리

Angular 애플리케이션은 분할된 컴포넌트로 구성되기 때문에 컴포넌트 간에는 컴포넌트 트리로 표현되는 '부모-자식' 관계가 형성됩니다. 컴포넌트 간의 부모-자식 관계는 데이터와 이벤트가 왕래하는 상태 정보 흐름의 통로가 되며, 이를 위해 상태 공유가 이루어지기 때문에 컴포넌트 간의 부모-자식 관계는 Angular 애플리케이션에서 중요한 의미를 갖습니다. 따라서 설계 시점부터 화면을 어떠한 컴포넌트 단위로 분할할 것인지에 대한 검토가 필요합니다.

컴포넌트의 기본 동작 구조

컴포넌트의 기본 동작 구조를 알아보기 위해 @Component 데코레이터의 templateUrl 프로퍼티에 설정된 템플릿을 살펴봅시다.

<h1>
  Welcome to {{ title }}!
</h1>

템플릿은 컴포넌트의 뷰를 정의하기 위해 HTML과 Angular 고유의 템플릿 문법으로 작성합니다. {{ title }}은 템플릿 문법 중 하나인 인터폴레이션으로, 컴포넌트 클래스의 데이터를 템플릿에 바인딩합니다.

이러한 방식을 데이터 바인딩이라고 합니다다.

컴포넌트는 데이터 바인딩에 의해 템플릿과 컴포넌트 클래스의 데이터를 유기적으로 연계합니다. 기본적인 동작 구조는 아래와 같습니다.

• 출처 : https://poiemaweb.com/angular-component-basics

컴포넌트 간 통신방법

1. 부모-자식 관계일때

1) @Input 데코레이터 (부모 → 자식)

자식 컴포넌트/디렉티브에 있는 특정 프로퍼티가 부모 컴포넌트/디렉티브에서 값을 받는다는 것을 지정하는 데코레이터입니다. 프로퍼티 바인딩으로 전달한 데이터는 자식 컴포넌트에서 @Input 데코레이터로 받을 수 있습니다.

child

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string; 
    // masterName 프로퍼티를 외부에서 바인딩 할 때 'master'라는 이름으로 사용하기 위한 선언
}

parent

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

import { HEROES } from './hero';

@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

👉 parent는 *ngFor를 사용해서 배열에 있는 항목마다 child를 만드는데, 각 컴포넌트를 만들때마다 master 문자열 프로퍼티를 자식 컴포넌트의 master로 연결하고, 반복되는 hero 인스턴스를 자식 컴포넌트의 hero 프로퍼티로 바인딩 합니다.

2) @Output 데코레이터 (자식 → 부모)

@Output 데코레이터는 자식의 데이터를 부모에 전달하는데 사용합니다. 주로 이벤트를 바인딩하여 사용하며, 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트가 이벤트 바인딩해서 데이터를 전달받게 됩니다.

자식 컴포넌트에서 어떤 이벤트가 발생하면 이 이벤트는 EventEmitter 타입으로 지정한 프로퍼티를 통해 부모 컴포넌트에게 보낼 수 있습니다. 부모 컴포넌트는 이 이벤트를 바인딩해서 원하는 로직을 실행하면 됩니다.

예제를 통해서 살펴봅시다.

child

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="didVote">Agree</button>
    <button (click)="vote(false)" [disabled]="didVote">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote = false;

  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }
}

parent

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

@Component({
  selector: 'app-vote-taker',
  template: `
    <h2>Should mankind colonize the Universe?</h2>
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
    <app-voter *ngFor="let voter of voters"
      [name]="voter"
      (voted)="onVoted($event)">
    </app-voter>
  `
})
export class VoteTakerComponent {
  agreed = 0;
  disagreed = 0;
  voters = ['Narco', 'Celeritas', 'Bombasto'];

  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}

이 예제에서 버튼을 클릭하면 자식 컴포넌트로 불리언 타입의 데이터를 전달합니다. 그리고 parent의 onVoted() 함수가 이벤트 객체를 인자로 받아서 agree와 disagree 카운터를 갱신합니다.

이 때 전달되는 이벤트 객체는 템플릿에서 $event라는 이름으로 접근할 수 있으며, 템플릿에서 이벤트 핸들러 함수에 인자로 전달하기 때문에 컴포넌트 클래스 코드에서 이 이벤트 객체를 활용할 수 있습니다.

• 예제2(장바구니)

child

    @Component({
        selector: 'app-child',
        template: `
        <p>
        {{item}}
        <button (click)="addToCart(item)">추가</button>
        </p>
    `
    })
    export class ChildComponent {
        @Input() item;
        @Output() pushItem = new EventEmitter<string>();
        addToCart(item:string) {
            this.pushItem.emit(item);
        }
    }

parent

    @Component({
      selector: 'app-parent',
      template: `
        <h1>식품 / 과자류</h1>

            <app-child
                *ngFor="let item of list"
                [item]="item"
                (pushItem)="pushItem($event)">
            </app-child>

        <h1>내 장바구니</h1>
        <div *ngFor="let item of cartList">
          {{item}}: {{cart[item]}}개
        </div>
        `
    })
    export class ParentComponent {
      cart={};
      cartList = [];
      list=['초코파이', '빅파이', '참크래커', '마이쮸', '자이리톨', '꼬깔콘']
      pushItem (item) {
        this.cart[item]
        ? this.cart[item]++
        : (this.cart[item] = 1, this.cartList.push(item))
      }
    }

(+) 참고

🚀 입력 프로퍼티를 세터(setter)로 가로채기

부모 컴포넌트에서 값이 전달될 때 추가 로직을 실행하기 위해 입력 프로퍼티에 세터를 사용할 수 있습니다.

child

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

    @Component({
      selector: 'app-name-child',
      template: '<h3>"{{name}}"</h3>'
    })
    export class NameChildComponent {
      @Input()
      get name(): string { return this._name; }
      set name(name: string) {
        this._name = (name && name.trim()) || '<no name set>';
      }
      private _name = '';
    }

parent

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

    @Component({
      selector: 'app-name-parent',
      template: `
      <h2>Master controls {{names.length}} names</h2>
      <app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
      `
    })
    export class NameParentComponent {
      // 'Dr IQ', '<빈 값>', 'Bombasto'를 표시합니다.
      names = ['Dr IQ', '   ', '  Bombasto  '];
    }

🚀 ngOnChanges()로 입력 프로퍼티 가로채기

입력 프로퍼티는 `[OnChanges](https://angular.kr/api/core/OnChanges)` 라이프싸이클 후킹 인터페이스를 사용하는 `ngOnChanges()` 메소드로도 가로챌 수 있습니다.

입력 프로퍼티 여러개를 가로채야 한다면 세터를 사용하는 것보다 이 방식이 더 편할 수 있습니다.

    import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

    @Component({
      selector: 'app-version-child',
      template: `
        <h3>Version {{major}}.{{minor}}</h3>
        <h4>Change log:</h4>
        <ul>
          <li *ngFor="let change of changeLog">{{change}}</li>
        </ul>
      `
    })
    export class VersionChildComponent implements OnChanges {
      @Input() major: number;
      @Input() minor: number;
      changeLog: string[] = [];

      ngOnChanges(changes: SimpleChanges) {
        const log: string[] = [];
        for (const propName in changes) {
          const changedProp = changes[propName];
          const to = JSON.stringify(changedProp.currentValue);
          if (changedProp.isFirstChange()) {
            log.push(`Initial value of ${propName} set to ${to}`);
          } else {
            const from = JSON.stringify(changedProp.previousValue);
            log.push(`${propName} changed from ${from} to ${to}`);
          }
        }
        this.changeLog.push(log.join(', '));
      }
    }

child는 major와 minor 두 입력 프로퍼티 값이 변경되는 것을 감지하고 이 내용을 로그로 출력합니다:

parent

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

    @Component({
      selector: 'app-version-parent',
      template: `
        <h2>Source code version</h2>
        <button (click)="newMinor()">New minor version</button>
        <button (click)="newMajor()">New major version</button>
        <app-version-child [major]="major" [minor]="minor"></app-version-child>
      `
    })
    export class VersionParentComponent {
      major = 1;
      minor = 23;

      newMinor() {
        this.minor++;
      }

      newMajor() {
        this.major++;
        this.minor = 0;
      }
    }

🚀 템플릿 지역변수로 자식 컴포넌트 접근하기 (부모 템플릿에서 자식 컴포넌트 접근)

부모 컴포넌트는 자식 컴포넌트의 프로퍼티나 메소드에 직접 접근할 수 없습니다. 하지만 부모 템플릿에 템플릿 참조 변수를 선언하면, 자식 컴포넌트의 프로퍼티나 메소드에 접근할 수 있습니다.

child

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

    @Component({
      selector: 'app-countdown-timer',
      template: '<p>{{message}}</p>'
    })
    export class CountdownTimerComponent implements OnDestroy {

      intervalId = 0;
      message = '';
      seconds = 11;

      ngOnDestroy() { this.clearTimer(); }

      start() { this.countDown(); }
      stop()  {
        this.clearTimer();
        this.message = `Holding at T-${this.seconds} seconds`;
      }

      private clearTimer() { clearInterval(this.intervalId); }

      private countDown() {
        this.clearTimer();
        this.intervalId = window.setInterval(() => {
          this.seconds -= 1;
          if (this.seconds === 0) {
            this.message = 'Blast off!';
          } else {
            if (this.seconds < 0) { this.seconds = 10; } // reset
            this.message = `T-${this.seconds} seconds and counting`;
          }
        }, 1000);
      }
    }

parent

    import { Component } from '@angular/core';
    import { CountdownTimerComponent } from './countdown-timer.component';

    @Component({
      selector: 'app-countdown-parent-lv',
      template: `
          <h3>Countdown to Liftoff (via local variable)</h3>
          <button (click)="timer.start()">Start</button>
          <button (click)="timer.stop()">Stop</button>
          <div class="seconds">{{timer.seconds}}</div>
          <app-countdown-timer #timer></app-countdown-timer>
      `,
      styleUrls: ['../assets/demo.css']
    })
    export class CountdownLocalVarParentComponent { }

👉 원래 부모 컴포넌트는 자식 컴포넌트의 seconds 프로퍼티나 start, stop 메소드에 직접 접근할 수 없습니다. 하지만 <countdown-timer>를 템플릿 지역 변수 #timer로 선언하면 이 변수를 사용해서 자식 컴포넌트에 접근할 수 있습니다.

이 템플릿 지역 변수는 자식 컴포넌트 자체를 가리키며, 템플릿 지역 변수를 선언한 후에는 부모 컴포넌트의 템플릿에서 자식 컴포넌트의 프로퍼티나 메소드에 자유롭게 접근할 수 있습니다.

🚀 ViewChild로 자식 컴포넌트 접근하기 (부모 클래스에서 자식 컴포넌트 접근)

템플릿 지역 변수는 부모 컴포넌트의 템플릿에서만 자식 컴포넌트에 접근할 수 있기 때문에 자유롭게 활용하기에는 제한이 있습니다. 부모 컴포넌트의 클래스에서는 자식 컴포넌트에 접근할 수 없기 때문입니다.

부모 컴포넌트의 클래스에서 자식 컴포넌트에 접근하려면 자식 컴포넌트에 ViewChild를 사용해서 부모 컴포넌트로 주입(inject)해야 합니다.

child

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

    @Component({
      selector: 'app-countdown-timer',
      template: '<p>{{message}}</p>'
    })
    export class CountdownTimerComponent implements OnDestroy {

      intervalId = 0;
      message = '';
      seconds = 11;

      ngOnDestroy() { this.clearTimer(); }

      start() { this.countDown(); }
      stop()  {
        this.clearTimer();
        this.message = `Holding at T-${this.seconds} seconds`;
      }

      private clearTimer() { clearInterval(this.intervalId); }

      private countDown() {
        this.clearTimer();
        this.intervalId = window.setInterval(() => {
          this.seconds -= 1;
          if (this.seconds === 0) {
            this.message = 'Blast off!';
          } else {
            if (this.seconds < 0) { this.seconds = 10; } // reset
            this.message = `T-${this.seconds} seconds and counting`;
          }
        }, 1000);
      }
    }

parent

    import { AfterViewInit, ViewChild } from '@angular/core';
    import { Component } from '@angular/core';
    import { CountdownTimerComponent } from './countdown-timer.component';

    @Component({
      selector: 'app-countdown-parent-vc',
      template: `
      <h3>Countdown to Liftoff (via ViewChild)</h3>
      <button (click)="start()">Start</button>
      <button (click)="stop()">Stop</button>
      <div class="seconds">{{ seconds() }}</div>
      <app-countdown-timer></app-countdown-timer>
      `,
      styleUrls: ['../assets/demo.css']
    })
    export class CountdownViewChildParentComponent implements AfterViewInit {

      @ViewChild(CountdownTimerComponent)
      private timerComponent: CountdownTimerComponent;

      seconds() { return 0; }

      ngAfterViewInit() {
        // `seconds()` 메소드는 `CountdownTimerComponent.seconds`에서 다시 구현합니다.
        // 이 때 개발 모드에서 출력하는 단방향 바인딩 검사 에러를 방지하기 위해
        // 한 싸이클 기다려야 합니다.
        setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
      }

      start() { this.timerComponent.start(); }
      stop() { this.timerComponent.stop(); }
    }

👉 먼저, ViewChild 데코레이터와 AfterViewInit 라이프싸이클 후킹 인터페이스를 로드합니다.

그리고 CountdownTimerComponent를 timerComponent 프로퍼티로 선언하면서 @ViewChild 데코레이터를 사용했습니다.

템플릿 지역변수가 자식 컴포넌트의 메소드를 직접 실행했던 것과는 달리, 자식 컴포넌트를 직접 호출하지 않고 부모 컴포넌트에 있는 start, stop 메소드를 사용하며, 현재 남아있는 초를 확인할 때도 부모 컴포넌트의 seconds 메소드를 활용합니다. 각각의 메소드에서 자식 컴포넌트에 접근하는 식으로 구현하는 것입니다.

⚠️ 라이프 사이클 고려하기

이 때 ngAfterViewInit() 라이프싸이클 후킹 함수가 중요합니다.

자식 컴포넌트인 타이머 컴포넌트는 Angular가 부모 컴포넌트의 뷰를 화면에 표시한 이후에야 사용할 수 있습니다. 그래서 뷰가 완전히 준비되기 전까지는 0을 표시합니다.

부모 컴포넌트의 뷰가 준비되면 자식 컴포넌트에서 시간을 가져오기 위해 ngAfterViewInit 라이프싸이클 후킹 함수를 실행하는데, Angular는 단방향 데이터 흐름을 권장하기 때문에 부모 컴포넌트의 뷰를 같은 JavaScript 실행 싸이클 안에서 갱신하는 것을 금지합니다.

그래서 ngAfterViewInit()에서 자식 컴포넌트의 시간을 가져와서 부모 컴포넌트 프로퍼티에 할당하는 것은 setTimeout() 으로 한 싸이클 늦췄습니다.

4) Service를 이용한 통신

부모 컴포넌트와 자식 컴포넌트가 같은 서비스를 주입받는다면 이 서비스를 활용해서 양방향으로 데이터를 주고받을 수 있습니다.

컴포넌트에 주입되는 서비스는 그 컴포넌트에서 자유롭게 사용할 수 있습니다. ⚠️ 이 때 주입되는 서비스의 인스턴스가 동일해야 하기 때문에, 서비스 프로바이더를 별도로 지정하면 컴포넌트 통신에 활용할 수 없습니다.

service

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class MissionService {

  // 문자열 타입의 옵저버블 소스
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();

  // 문자열 옵저버블 스트림
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();

  // 서비스가 옵저버블을 전달할 때 사용하는 메소드
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }

  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }
}

MissionControl (Parent)

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

import { MissionService } from './mission.service';

@Component({
  selector: 'app-mission-control',
  template: `
    <h2>Mission Control</h2>
    <button (click)="announce()">Announce mission</button>
    <app-astronaut *ngFor="let astronaut of astronauts"
      [astronaut]="astronaut">
    </app-astronaut>
    <h3>History</h3>
    <ul>
      <li *ngFor="let event of history">{{event}}</li>
    </ul>
  `,
  providers: [MissionService]
})
export class MissionControlComponent {
  astronauts = ['Lovell', 'Swigert', 'Haise'];
  history: string[] = [];
  missions = ['Fly to the moon!',
              'Fly to mars!',
              'Fly to Vegas!'];
  nextMission = 0;

  constructor(private missionService: MissionService) {
    missionService.missionConfirmed$.subscribe(
      astronaut => {
        this.history.push(`${astronaut} confirmed the mission`);
      });
  }

  announce() {
    const mission = this.missions[this.nextMission++];
    this.missionService.announceMission(mission);
    this.history.push(`Mission "${mission}" announced`);
    if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
  }
}

MissionControlComponent는 생성자를 통해 MissionService의 인스턴스를 주입받으며, providers 메타데이터를 사용해서 서비스 인스턴스를 자식 컴포넌트에서도 사용할 수 있도록 공유합니다:

Astronaut (Child)

import { Component, Input, OnDestroy } from '@angular/core';

import { MissionService } from './mission.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})
export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;
  subscription: Subscription;

  constructor(private missionService: MissionService) {
    this.subscription = missionService.missionAnnounced$.subscribe(
      mission => {
        this.mission = mission;
        this.announced = true;
        this.confirmed = false;
    });
  }

  confirm() {
    this.confirmed = true;
    this.missionService.confirmMission(this.astronaut);
  }

  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

그리고 자식 컴포넌트 AstronautComponent도 생성자를 통해 서비스 인스턴스를 주입 받습니다:

2. 서로 다른 트리에 존재할 때

1) Observable, 서비스를 사용한 컴포넌트간의 통신

앵귤러에서는 Subject 객체를 생성함으로써 Observable 변수를 만들 수 있습니다.

Observable 변수는 해당 변수의 변화를 구독자에게 전달할 수 있는 기능을 가지고 있는 변수를 말합니다. 즉, Global하게 접근할 수 있는 Observable 변수를 만들어 놓고, 해당 변수의 변화되는 값을 사용하고자 하는 컴포넌트에서 Observable 변수를 구독하여 사용하면 됩니다. (출처 : https://secjong.tistory.com/8)

매개자 역할의 서비스 생성

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable()
export class DataService {
  private subject = new Subject<any>();

  constructor() { }

  sendData(data){
    this.subject.next(data);
    console.log("sendData() data : " , data);
  }

  getData(){
    return this.subject.asObservable();
  }
}

👉 먼저, Observable 변수를 선언하기 위한 서비스를 생성합니다. rxjs 의 Subject 객체는 Observable 인 동시에 Observer입니다.

한 컴포넌트에서 서비스의 sendData() 를 호출하여 데이터를 Subject 의 next 메서드를 통해서 데이터 스트림에 밀어넣습니다. 다른 getData() 메서드는 데이터를 받을 컴포넌트에서 호출하여 데이터스트림에서 Observable 객체를 받은 후, 데이터 전송이 완료되었을 때 구독(subscribe) 할 것입니다.

데이터를 보낼 컴포넌트 (sendData(data))

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PostService } from '../../services/post/post.service';
import { DataService } from '../../services/data.service';

import { Post } from '../../models/post';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  post: Post;
  postNo: number;

  constructor(private activatedRouter: ActivatedRoute,
                    private postService: PostService,
                    private dataService: DataService) {
    this.subscription = activatedRouter.params.subscribe((params: Params) => {
      this.postNo = params['postNo'];
      this.postService.getPost(this.postNo)
      .subscribe(
        (post) => {
          this.post = post;
          dataService.sendData(this.post);
        },
        (error) => {
          console.log(error);
        }
      );
    });
  }

  ngOnInit() {

  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

핵심은 위에서 생성한 서비스의 sendData() 를 호출하는 것입니다. DataService 를 주입받고, 보내고자 하는 데이터를 dataService.sendData() 로 호출하여 넘겨줍니다. Subscription 객체는 구독했던 객체를 파괴하기 위해 사용합니다. (ngOnDestroy() 라이프사이클에서, 저장했던 subscription 을 unsubscribe)

데이터를 받을 컴포넌트 (getData())

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from '../../services/data.service';

import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, OnDestroy {
  title = 'Blog';
  regDate = '';
  categoryName = '';

  subscription: Subscription;

  constructor(private dataService: DataService) {
    console.log("banner 컴포넌트 생성!");

    this.subscription = dataService.getData().subscribe(data => {
      console.log("banner subscription : " , data);
      this.title = data.title;
      this.regDate = data.regTime;
      this.categoryName = data.categoryId;
    })

  }

  ngOnInit() {
  }

  ngOnDestroy(){
    this.subscription.unsubscribe();
  }
}

데이터를 받을 컴포넌트에서는 DataService 를 주입받고, 이 DataService 의 getData() 메서드를 호출하여 Observable 객체를 받습니다. 이를 subscribe 메서드를 사용하여 데이터가 전달되면 수행할 작업을 진행하면 됩니다. 데이터를 수신할 컴포넌트에서도 마찬가지로 Subscription 객체를 이용해 구독한 객체를 파괴시켜주어야 합니다.

컴포넌트는 템플릿과 메타데이터, 컴포넌트 클래스로 구성되며 데이터 바인딩에 의해 연결됩니다. 컴포넌트는 화면을 구성하는 View를 생성하고 관리하는 것이 주된 역할이며 화면은 1개 이상의 컴포넌트를 조립하여 구성합니다.

디렉티브

애플리케이션 전역에서 사용할 수 있는 뷰에 관련한 공통 관심사를 컴포넌트에서 분리하여 구현한 것으로, 컴포넌트의 복잡도를 낮추고 가독성을 높입니다. 구조 디렉티브와 어트리뷰트 디렉티브로 구분할 수 있으며, 큰 틀에서 컴포넌트 또한 디렉티브로 구분할 수 있습니다.

서비스

다양한 목적의 애플리케이션 공통 로직을 담당합니다. 컴포넌트에서 애플리케이션 전역 관심사를 분리하기 위해 사용하며, 의존성 주입이 가능한 클래스로 작성됩니다.

라우터

컴포넌트를 교체하는 방법으로 뷰를 전환하여 화면 간 이동을 구현합니다.

모듈

기능적으로 관련된 구성요소를 하나의 단위로 묶는 매커니즘을 말합니다. 모듈은 관련이 있는 기능들이 응집된 기능 블록으로 애플리케이션을 구성하는 하나의 단위를 만듭니다. 모듈은 다른 모듈과 결합할 수 있으며 Angular는 여러 모듈을 조합하여 애플리케이션을 구성합니다. 컴포넌트, 디렉티브, 파이프, 서비스 등의 Angular의 구성요소는 모듈에 등록되어야 사용할 수 있습니다.

Angular는 SPA 개발을 위한 구글의 오픈소스 프레임워크입니다.

정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여, 대규모 애플리케이션 개발에 보다 적합한 환경을 제공합니다.

Angular의 장점

1) 컴포넌트 기반 개발 컴포넌트 기반 개발(CBD)은 개발 생산성을 높이며 대규모 애플리케이션에 적합한 구조입니다.

2) TypeScript 채택 Angular가 기본언어로 채택하고 있는 TypeScript의 명시적 타입 지정은 코드의 가독성을 높이고 예측할 수 있게 하며, 컴파일 단계에서 오류를 포착할 수 있는 장점이 있습니다.

3) 개발도구의 통합 및 개발 환경 구축 자동화 Angular CLI를 통해 간편한 개발 환경 구축을 지원합니다. 프레임워크를 도입할 때 장벽으로 손꼽히는 것 중 하나가 개발 환경 구축임을 미루어보면 이는 큰 장점입니다. 간단한 명령어를 사용하여 프로젝트 생성에서 빌드, 테스트, 구성요소 추가 등을 간편하게 할 수 있으며, 개발용 서버를 내장하고 있어 실행 또한 가능합니다.

4) 성능의 향상

• AoT 컴파일 AoT 컴파일(Ahead of Time compilation)은 사전 컴파일 방식을 의미합니다. 예를 들어, ngIf, ngFor와 같은 구조 디렉티브를 브라우저가 실행 가능한 코드로 변환해야 하는데 이러한 과정을 런타임에서 실시하지 않고, 사전에 컴파일하여 실행 속도를 향상시키는 기법입니다.

• Lazy Loading SPA의 단점을 극복하기 위한 대안으로, 애플리케이션 실행시점에 모든 모듈을 한꺼번에 로딩하지 않고 필요한 시점에 필요한 모듈만을 로딩하는 방식입니다. 현재 페이지에서 불필요한 모듈까지 로딩하는 낭비를 방지함으로써 페이지 로딩 속도를 높입니다.

• 코드 최적화 'Mobile First'를 지향하는 고성능 프레임워크를 표방하는 만큼 Angular 코드는 지속적으로 최적화되고 있습니다.

2. Angular CLI

Angular CLI는 Angular 프로젝트 스캐폴딩을 생성, 실행, 빌드할수 있으며, Angular의 다양한 구성요소를 선별적으로 추가할 수 있는 강력한 커맨드-라인 인터페이스입니다. 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있습니다.

지원기능

• Angular 프로젝트 생성
• Angular 프로젝트에 컴포넌트, 디렉티브, 서비스, 파이프, 클래스, 인터페이스 등의 구성요소 추가
• LiveReload를 지원하는 내장 개발 서버를 이용한 Angular 프로젝트 실행
• Unit/E2E 테스트 환경 지원
• 배포를 위한 Angular 프로젝트 패키징
  

기본 사용 방법

npm 패키지 매니저를 사용하여 간단하게 Angular CLI를 설치할 수 있습니다.

$ npm install -g @angular/cli

@angular/cli는 퍼스트 파티 패키지로, SPA개발에 필요한 모든 도구를 포함하고 있습니다. 컴포넌트, 서비스, 모듈 등 모든 파일들을 명령어로 쉽게 추가할 수 있고 기존 코드를 읽어 import문도 작성해줍니다. 새로운 앵귤러 프로젝트를 생성하고, 빌드한 뒤에 실행하려면 다음과 같이 명령어를 실행하면 됩니다.

$ ng new <프로젝트 이름> 
# 프로젝트 실행
$ cd <프로젝트 이름>
$ ng serve (--open, --port ..)

ng serve는 로컬 개발환경에서 애플리케이션을 빌드한 후에 서버를 실행하는 명령어입니다. 소스 코드가 변경되면 자동으로 재빌드하고 환경을 갱신합니다.

앵귤러에서 기본 포트는 4200번 입니다. 브라우저에서 http://localhost:4200 으로 접근하면 애플리케이션이 실행되는 것을 확인할 수 있습니다.

프로젝트 구성요소 생성

$ ng generate (ng g)

컴포넌트, 디렉티브, 서비스, 파이프, 모듈, 가드, 클래스, 인터페이스, Enum 등을 생성할 수 있습니다.

3. Angular의 파일 구조와 처리 흐름

3-1. Angular 애플리케이션의 파일 구조

1) src 폴더

Angular 프로젝트는 컴포넌트, 디렉티브, 서비스, 모듈 등 Angular 구성 요소와 각종 설정 파일로 구성됩니다. src 폴더는 이러한 Angular의 모든 구성요소, 공통 CSS, 이미지나 폰트와 같은 정적파일, 설정 파일 등 애플리케이션 필수 파일을 담고 있습니다. src/app 폴더에는 Angular구성요소가 위치하며, 개발자가 작성하는 대부분의 파일은 이곳에 포함됩니다.

- app/app.components.(ts, html, css, spec.ts) : 모든 컴포넌트의 부모 컴포넌트인 루트 컴포넌트를 구성하는 컴포넌트 클래스, 템플릿, CSS 유닛 테스트용 스펙 파일
- app/app.module.ts : Angular 구성요소를 등록하는 루트 모듈
- assets/ : 이미지나 폰트와 같은 정적 파일을 위한 폴더
- environments/ : 프로젝트 빌드 시에 사용될 프로덕션용/개발용 환경설정 파일이 담겨있는 폴더
- browserslist: Autoprefixer, babel과 같은 프론트엔드 도구 간에 적용 대상 브라우저를 공유하는 browserslist 라이브러리 설정 파일
- favicon.ico: 파비콘 파일
- index.html : 웹 애플리케이션 방문 시 처음으로 로딩되는 디폴트 페이지.
    루트 컴포넌트의 셀렉터인 <app-root>에 의해 루트 컴포넌트의 뷰가 로드되어 브라우저에 표시됩니다.
    빌드 시에는 번들링된 자바스크립트 파일이 자동 추가된 index.html이 /dist 폴더에 생성됩니다
- karma.conf.js : Karma test runner를 위한 설정 파일로. ng test 명령어 실행 시 참조됩니다
- main.ts : 프로젝트의 메인 진입점. 루트 모듈을 사용하여 애플리케이션을 부트스트랩(기동)합니다
- polyfills.ts: 크로스 브라우징을 위한 폴리필들을 임포트하는 역할을 합니다.(browser support 참고)
- styles.css: 애플리케이션 전역에 적용되는 글로벌 css 파일
- test.ts : 유닛 테스트를 위한 메인 진입점
- tsconfig.(app|spec).json: TypeScript 컴파일 옵션 설정 파일
- typings.d.ts : TypeScript를 위한 타입 선언 파일

2) 기타 설정 파일 src 폴더 밖의 파일들은 테스트, 빌드, 배포 등을 위한 각종 설정 파일입니다.

- e2e/: e2e(end-to-end) 테스트 관련 파일을 위한 폴더. e2e 테스트를 위해 Protractor가 사용하는 설정 파일인 protractor.conf.js가 담겨있습니다. ng e2e 명령어 실행 시 참조됩니다.
- node_modules/ : package.json에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 의존 모듈 저장소
- .editorconfig: 코드 에디터 기본 설정 파일
- .gitignore : Git 소스 관리 제외 대상을 위한 설정 파일
- angular.json : Angular CLI를 위한 설정 파일
- package.json : 의존 모듈 관리를 위해 패키지 매니저가 사용하는 모듈 관리 파일
- README.md : 프로젝트의 개요를 기술한 README 파일. Angular CLI가 기본적인 내용을 자동 생성합니다
- tsconfig.json : TypeScript 컴파일 옵션 설정 파일
- tslint.json : TSLint가 사용하는 linting(구문 체크) 설정 파일. ng lint 명령어 실행 시 참조됩니다.

3-2. Angular 애플리케이션의 처리 흐름

index.html

웹 브라우저가 가장 먼저 로딩하는 프로젝트 파일은 /my-app/dist/index.html 입니다. 이것은 ng build 명령어로 프로젝트를 빌드했을 때 /my-app/dist/index.html에 번들링된 자바스크립트 파일이 추가되어 자동으로 생성되는 파일입니다.

🚀 index.html은 빌드의 결과물로 실제 배포시에는 서버로 이관됩니다.

ng serve 명령어에 의해 내장 개발 서버를 이용하여 로컬 환경에서 프로젝트를 실행(preview)하는 경우,
Angular CLI 내부적으로 빌드를 자동 수행하므로 빌드를 별도 실행하여 index.html를 생성할 필요는 없습니다.
자동으로 빌드되어 가상 드라이브에 저장되어있는 index.html을 내장 개발 서버가 로드한다고 이해하면 됩니다.

Angular 애플리케이션을 가동하기 위해서는 수많은 의존성 모듈(@angular/*, core-js, zone.js, RxJs 등)과 TypeScript 파일의 컴파일 결과물인 자바스크립트 파일을 로드할 필요가 있습니다. Angular는 모듈 번들러 Webpack을 사용하여 의존성 모듈과 자바스크립트 파일을 번들링 한 후, 수작업 없이 간편하게 로드할 수 있도록 자동화 기능을 제공합니다.

번들링의 결과물로 생성된 자바스크립트 파일들이 로드되어 실행되면서 Angular 애플리케이션은 동작하기 시작합니다. 번들링된 자바스크립트 파일은 아래와 같습니다.

• main.js
• polifills.js
• styles.js
• vendor.js
• runtime.js

main.ts

main.ts는 프로젝트의 메인 진입점 입니다. 루트 모듈을 사용하여 애플리케이션을 부트스트랩(기동)합니다.

// src/main.ts

...
platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));

main.ts는 angular.json의 main 프로퍼티의 설정에 의해 로드됩니다.

// angular.json
{
    ...
    "architect": {
        "build" : {
            "builder" : "@angular-devkit/build-angular:browser",
            "options" : {
                "outputPath" : "dist/my-app",
                "index" : "src/index.html",
                "main" : "src/main.ts",
    ...

app.module.ts

@NgModule 데코레이터의 인자로 전달되는 메타데이터에 애플리케이션 전체의 설정정보를 기술한 루트 모듈. 루트 모듈은 (/src/app/app.component.ts)를 부트스트랩 합니다.

app.component.ts

모든 컴포넌트의 부모 역할을 담당하는 루트 컴포넌트입니다. my-app 프로젝트의 경우 /dist/index.html의 app-root에 의해 루트 컴포넌트의 뷰가 로드되어 app-root의 콘텐츠로 브라우저에 표시됩니다.

const entityReducer = createReducer<{ entities: Record<number, { id: number; name: string }> }>(
  {
    entities: {},
  },
  on(create, (state, { type, ...entity }) => ({
    ...state,
    entities: { ...state.entities, [entity.id]: entity }
  }),
  on(update, (state, { id, newName }) => {
    const entity = state.entities[id]

    if (entity) {
      return {
        ...state,
        entities: {
          ...state.entities,
          [entity.id]: { ...entity, name: newName }
        }
      }
    }

    return state;
  },
  on(remove, (state, { id }) => {
    const { [id]: removedEntity, ...rest } = state.entities;

    return { ...state, entities: rest };
  }),
)

With the mutableOn function we are able to directly perform state mutations in reducers with less noise, and more concise code.

const entityReducer = createReducer<{ entities: Record<number, { id: number; name: string }> }>(
  {
    entities: {},
  },
  mutableOn(create, (state, { type, ...entity }) => {
    state.entities[entity.id] = entity
  }),
  mutableOn(update, (state, { id, newName }) => {
    const entity = state.entities[id]
    if (entity) {
      entity.name = newName
    }
  }),
  mutableOn(remove, (state, { id }) => {
    delete state.entities[id]
  }),
)

나의 풀이

0. n,m의 크기가 작아(20) 브루트 포스가 적합할 것이라고 판단했습니다
1. 키가 자물쇠를 벗어나는 경우를 처리하기 위해 배열 크기를 확장(n+(m-1)*2)
2. 모든 배열의 좌표를 순회하며 키와 자물쇠의 숫자를 합함.
3. 이때 key를 90, 180, 270, 360도 회전하며 모든 경우를 대조.
4. 배열 내 자물쇠 영역의 모든 숫자가 1이라면 키와 열쇠가 일치한다고 판단.

import copy

def solution(key, lock):
    answer = False
    n = len(lock)
    m = len(key)
    v_lock = [[0] * (n+(m-1)*2) for _ in range(n+(m-1)*2)]
    for i in range(n):
        for j in range(n):
            v_lock[i+(m-1)][j+(m-1)] = lock[i][j]
    test_lock = copy.deepcopy(v_lock)
    for i in range(n+m-1):
        for j in range(n+m-1):
            for _ in range(4):
                key = rotate90(key)
                for k in range(m):
                    for l in range(m):
                        test_lock[i+k][j+l] += key[k][l]
                if isFit(test_lock, n, m): return True
                else: test_lock = copy.deepcopy(v_lock)
    return answer

def rotate90(key):
    m = len(key)
    ret = [[0] * m for _ in range(m)]
    for r in range(m):
        for c in range(m):
            ret[c][m-1-r] = key[r][c]
    return ret

def isFit(test_lock, n, m):
    for i in range(n):
        for j in range(n):
            if test_lock[i+(m-1)][j+(m-1)] != 1: return False
    return True