TIL_171114 Angular Directive, Pipe, Lifecycle Hook

angular

Directive

  • 애플리케이션 전역에서 사용할 수 있는 공통관심사를 컴포넌트에서 분리하여 구현한 것
  • DOM의 모든 것(모양, 동작, 스타일)을 관리하기 위한 지시(명령)
  • 컴포넌트도 큰 관점에서 바라보면 디렉티브

그렇다면 컴포넌트와 디렉티브의 차이점은?
컴포넌트는 디렉티브와 달리, 반드시 뷰를 가져야함 -> 뷰를 생성하는데에 목적을 둠

1. 컴포넌트 디렉티브 (Component Directives)

  • 컴포넌트의 템플릿을 표시하기 위한 디렉티브
  • @component 데코레이터의 메타데이터 객체의 seletor 프로퍼티에서 임의의 디렉티브의 이름을 정의

2. 어트리뷰트 디렉티브 (Attribute Directives)

  • 어트리뷰트 디렉티브는 HTML 요소의 어트리뷰트로 사용하여 해당 요소의 모양이나 동작을 제어
  • ngClass, ngStyle

3. 구조 디렉티브 (Structural Directives)

  • 구조 디렉티브는 DOM 요소를 반복 생성(ngFor)
  • 조건에 의한 추가 또는 제거(ngIf, ngSwitch)
  • DOM 레이아웃(layout)을 변경하는 디렉티브

[참고]

  1. 네이티브 돔에 접근하는 방법은 해킹의 위험이 있기 때문에 부적절
    -> Renderer2객체를 활용
  2. 앵귤러 구조디렉티브는 하나의 요소에 하나의 구조디렉티브만 가질수 있음
    -> 두개를 쓰고 싶다면 ng-container를 활용

파이프

  • 템플릿 내에서 원하는 형식으로 값을 변환하여 표시
  • 파이프를 통한 형식변경은 원본은 변경X
  • 커스텀 파이프의 활용
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // reverse.pipe.ts
    import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({
      name: 'reverse'
    })
    export class ReversePipe implements PipeTransform {
      transform(value = ''): string {
        return value.split('').reverse().join('');
      }
    }
    // app.component.ts
    import { Component } from '@angular/core';
    @Component({
      selector: 'app-root',
      template: `
        <input type="text" [(ngModel)]="value">
        <p>{{ value | reverse }}</p>
      `
    })
    export class AppComponent {
      value: string;
    }

앵귤러의 변화감지

변화감지의 대상: 바인딩 되어있는 데이터
앵귤러는 필터가 걸려있는 변화감지 대상은 주소값이 변해야 변화감지를 한다!

데이터 변화감지를 못할 경우 해결방안

  1. 주소값이 변하지 않는 push의 사용보다 주소값을 변하게 하는 concat을 활용

  2. 순수파이프를 활용하여 pipe데코레이터에 pure: false를 지정

  • 감시하는 정도를 세밀하게 하여 변화감지 -> 성능 저하 우려

즉, 객체를 변경할때 주소값을 변경하도록 코딩한다! (push, forEach 금지)

Lifecycle Hook

1. Constructor

  • 객체를 생성하는 기능을 담당
  • 따라서 의존성 주입 외에는 사용 X

2. ngOnChanges

  • 입력프로퍼티(@Input)가 들어왔을때
  • 입력프로퍼티에 변화감지가 됐을때 (주소가 변경됐을때만)
  • 드문 사용

3. ngOnInit*

  • 모든 프로퍼티, 입력프로퍼티의 초기화가 완료된 시점에 한번만 호출
  • 대부분의할당을 시작하는 지점
  • 즉, 프로퍼티의 할당 또는 참조를 해야한다면 ngOnInit에

4. ngDoCheck

  • 변화감지에 의해 감지되지 않거나 감지할 수 없는 사항을 더티체크하기 위해 사용 -> 시스템 과부하 우려
  • 즉, 의도적으로 데이터의 변경은 주소값이 변경되도록 코딩하는 것!!
  • ngDoCheck는 사용을 피하라

5. ngOnDestroy*

  • Rxjs의 연결을 끊어줄때 (컴포넌트의 사망 시기)

오늘의 느낀점

이론으로는 아는것같은데 막상 코딩이 헷갈린다 특히나 앵귤러 부분에 넘어와서
어느부분에 어떻게 분리하고 하는게 더욱 헷갈리는듯. 목요일 실습전까지 코딩연습을
주로 하면서 복습해야겠다