앵귤러 컴포넌트 기초

🚧WIP.. 작성중 컴포넌트 만드는 법 컴포넌트 라이프 사이클

컴포넌트 역할: 애플리케이션의 화면을 구성하는 View를 생성하고 관리하는 것.

컴포넌트는 독립적이고 완결된 뷰를 생성하기 위하여 ‘html, css, javascript’를 하나의 단뒤로 묶는 것. W3C 표준인 웹 컴포넌트를 기반으로 한다.

ng new 명령어에 의해 생성된 프로젝트는 루트 컴포넌트와 루트 모듈을 각각 1개씩 갖는다. 루트 모듈은 프로젝트 최상위 모듈로 main.ts에 의해 부트스트랩되며 컴포넌트 트리 상 최상위 컴포넌트인 루트 컴포넌트는 루트 모듈에 의해 부트스트랩된다 => 부트스트랩 된다는게 무슨 말일까…? Import 비슷한 개념..?

@Component 데코레이터 영역 @Component 데코레이터에는 메타데이터 객체를 인자로 전달한다. 메타데이터 객체는 컴포넌트 생성에 필요한 정보(셀렉터, 템플릿, 스타일 정의 등)를 담고 있는 객체이다. 예를 들어 메타데이터 객체의 templateUrl 프로퍼티에는 컴포넌트의 뷰를 정의한 템플릿의 상대경로를 설정한다.

질문1: @Component 데코레이터는 자신의 바로 아래에 위치한 클래스를 컴포넌트 클래스로 인식한다. 따라서 데코레이터와 데코레이터가 장식하는 클래스 사이에는 아무 것도 존재해서는 안된다.

일반 클래스를 컴포넌트화하기 위해서는 @Component 데코레이터를 해당 클래스 바로 앞에서 호출하여 Angular에게 해당 클래스가 일반 클래스가 아니라 컴포넌트 클래스임을 알려야 한다. @Component 데코레이터는 자신의 바로 아래에 있는 클래스를 컴포넌트 클래스로 인식한다.

클래스 데코레이터 @Component, @NgModule, @Directive, @Injectable, @Pipe 프로퍼티 데코레이터 @Input, @Output, @ViewChild, @ViewChildren, @ContentChild, @ContentChildren, @HostBinding 메소드 데코레이터 @HostListener 파라미터 데코레이터 @Inject

문제3. 셀렉터

마지막으로 hello 컴포넌트를 모듈에 등록한다. 모듈은 관련된 Angular 구성 요소를 하나로 묶어 애플리케이션을 구성하는 하나의 단위로 만드는 역할을 한다. 컴포넌트, 디렉티브, 파이프, 서비스 등의 Angular 구성요소는 모듈에 등록되어야 사용할 수 있다. 단 ng g c 명령어로 컴포넌트를 추가했을 경우, 추가된 컴포넌트는 자동으로 모듈에 등록된다.

@NgModule 데코레이터에 인자로 전달하는 메타데이터 객체의 중요 프로퍼티만 간단히 알아보도록 하자. 프로퍼티 내용 providers 주입 가능한 객체(injectable object) 즉 서비스의 리스트를 선언한다. 루트 모듈에 선언된 서비스는 애플리케이션 전역에서 사용할 수 있다. declarations 컴포넌트, 디렉티브, 파이프의 리스트를 선언한다. imports 의존 관계에 있는 Angular 라이브러리 모듈, 기능 모듈(Feature module)이라 불리는 하위 모듈, 라우팅 모듈, 서드 파티 모듈을 선언한다. bootstrap 애플리케이션의 진입점(entry point)인 루트 컴포넌트를 선언한다.

라이프 사이클

질문2. 제일먼저 실행 되는 것. 컴포넌트나 디렉티브가 생성된 후에는 생성자가 제일 먼저 실행됩니다. 그리고 다음 순서에 따라 라이프싸이클 후킹 함수가 실행됩니다:

후킹 함수 용도와 실행 타이밍 ngOnChanges() Angular가 입력 프로퍼티 값을 설정할 때 실행됩니다. 이 메소드는 SimpleChanges타입의 객체를 인자로 받으며, 이 객체에서 이전 값과 현재 값을 확인할 수 있습니다. ngOnInit() 함수가 실행되기 전에 먼저 실행되고, 입력 프로퍼티의 값이 바뀔때마다 실행됩니다. ngOnInit() 디렉티브나 컴포넌트는 인스턴스가 생성되고 입력 프로퍼티를 통해 초기값이 지정된 이후에 화면에 표시되는데, 디렉티브나 컴포넌트를 초기화하는 로직이 더 있을 때 사용합니다. ngOnChanges()가 처음 실행된 이후에 한 번만 실행됩니다. ngDoCheck() 변화 감지 싸이클을 수동으로 실행할 때 사용합니다. 변화 감지 싸이클이 실행될 때마다 실행되며, ngOnChanges()와 ngOnInit() 메소드가 실행된 직후에도 한 번 실행됩니다. ngAfterContentInit() Angular가 컴포넌트의 템플릿을 컴포넌트 뷰로 준비하거나 뷰 안에 있는 디렉티브를 준비한 이후에 실행됩니다. ngDoCheck()가 처음 실행된 직후에 한 번만 실행됩니다. ngAfterContentChecked() Angular가 디렉티브나 컴포넌트의 뷰를 검사한 이후에 실행됩니다. ngAfterContentInit()이 실행된 후에 실행되며, ngDoCheck() 함수가 실행된 뒤에도 실행됩니다. ngAfterViewInit() Angular가 컴포넌트 뷰와 자식 컴포넌트 뷰, 뷰 안에 있는 디렉티브를 모두 초기화한 후에 실행됩니다. ngAfterContentChecked()가 처음 실행된 직후에 한 번만 실행됩니다. ngAfterViewChecked() Angular가 컴포넌트 뷰와 자식 컴포넌트 뷰, 뷰 안에 있는 디렉티브가 준비되었는지 검사한 후에 실행됩니다. ngOnDestroy() 디렉티브나 컴포넌트가 종료되기 직전에 실행되며, 이 함수에서 옵저버블 구독을 해제하거나 이벤트 핸들러를 제거해서 메모리 누수를 방지할 때 사용합니다.

Angular가 디렉티브나 컴포넌트를 종료하기 직전에 실행됩니다.

궁금한것.

• 입력 프로퍼티 값이 뭐지? Input 태그의 변화? 입력프로퍼티가 @input 인건가?
• 변화감지 사이클이 뭐지? Change detector 인가?

문제 3개.

1. ngOnChanges 에는 SImpleChanges argument로 받는데 이게 어떤 값 형태로 들어오는지 파악하기

class SimpleChange { constructor(previousValue: any, currentValue: any, firstChange: boolean) isFristChange(): boolean }

isFirstChange() : check whether the new value is the first value assigned

질문. 근데 누가 argument로 언제 넘겨주는거지? Angular 내부에서.???

ngOnChanges의 arg는 컴포넌트의 모든 멤버 변수인가? changes.prop으로 접근할 수 있나?

질문 템플릿 참조 변수 (ex #inputYourName)을 component class 내부에서도 접근하여 사용할 수 있나?

• 화면에 아직 안보이는 컴포넌트도 미리 컴파일 되나?