2019-06-25 Angular Lifecycle Hooks, Service, RxJS

Lifecycle Hooks

생명주기 : 컴포넌트와 디렉티브가 생성하고 소멸되기까지의 여러과정 

 

훅 메소드들 

ngOnChanges : 입력 프로퍼티로 바인딩한 값이 초기화 또는 변경되었을때 실행

ngOnInit : constructor와 비슷하게 한번만 동작. 프로퍼티의 초기화가 완료된 시점에 한번만 호출

ngDoCheck : 변화감지 로직이 실행될 때 호출 ( 가급적 사용하지 않고, 변화감지가 잘 될 수있도록 코딩 한다.) 

등등..

 

 

콘텐트 프로젝션

// 부모의 component
<single-content-projection>
  <strong>Single-slot</strong> <i>content projection</i>
</single-content-projection>

// 자식의 component
<div>
  <!-- 부모 컴포넌트가 지정한 콘텐츠와 치환된다. -->
  <ng-content></ng-content>  // 이부분이 바꿔치기가 된다.
<div>

 

 

서비스 (Service)

자신의 주요 관심사 이외의 부가적인 기능은 애플리케이션 전역의 관심사인 경우가 많다. 이러한 경우, 컴포넌트의 관심사와 애플리케이션 전역의 관심사를 분리하는 것이 필요한데 이때 사용하는 것이 서비스

 

 

의존성 인스턴스를 직접 생성하지 않고 외부 환경에 요구하는것 = 의존성 주입 (DI)

 

 

RxJS

리액티브 프로그래밍 : 비동기 데이터 스트림에 기반을 둔 프로그래밍 패러다임

 

프로그래밍은 입력 -> 로직 -> 출력 으로 이루어짐

 

입력데이터는 동기 데이터와 비동기 데이터로 구분된다. ( 데이터마다의 처리방식이 까다로움)

입력데이터를 옵저버블로 맞추자. 이 데이터 스트림(옵저버블)을  구독한다.

 

꼭 알아야하는 개념

 

옵저버블 : 외부 환경에서 애플리케이션 내부로 연속적으로 흐르는 데이터, 즉 데이터 스트림을 생성하고 방출하는 객체

옵저버 :  노티피케이션을 획득하여 사용하는 객체

노티피케이션 : 옵저버블이 방출할 수 있는 푸시 기반 이벤트 또는 값

섭스크립션(구독) : 데이터 소비자(Data consumer)인 옵저버는 데이터 생산자(Data producer)인 옵저버블을 구독한다.