[Angular] 기능 구현 방식

Angular 프레임워크로 특정 기능을 구현할 때 어떤 방식으로 사용하는지에 대해 알아보겠습니다.

UI Component 구현

클래스에 @Component Annotation을 붙여서 생성합니다.

HTML 템플릿 정의

인라인 HTML 코드를 사용할 때는 @Component 어노테이션 template 항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl 항목을 사용합니다.

컴포넌트 Property 를 UI에 표시

템플릿의 이중 중괄호 안에 Property를 사용합니다.

<span>{{ customValue }})</span>

컴포넌트 Property 바인딩

대괄호를 사용해서 Property를 바인딩합니다.

<input [value]="inputValue" />

이벤트 처리

이벤트 이름을 괄호로 감싸고 핸들러를 지정합니다.

<button (click)="onClickEvent">Click</button>

양방향 바인딩

[()] 표기를 사용합니다.

<input [(ngModel)]="componentProperty" />

HTML 일부를 자식 컴포넌트에 전달하기

자식 컴포넌트의 템플릿에 <ng-content> 태그를 사용합니다.

내비게이션 구현

라우터를 사용해서 컴포넌트와 URL을 연결하고 컴포넌트의 템플릿이 렌더링 될 위치를 <router-outlet> 태그로 지정합니다.

컴포넌트에서 데이터 받기

컴포넌트 프로퍼티를 선언할 때 @Input 어노테이션을 사용해서 외부 값과 연결합니다.

컴포넌트에 데이터 전달하기

컴포넌트 프로퍼티를 선언할 때 @Output 어노테이션을 사용하고 EventEmitter를 이용해서 이벤트를 발생시킵니다.

HTTP 요청

컴포넌트에 Http 객체를 주입하고 HTTP 함수를 사용합니다.

this.http.get('/users');

HTTP 응답 처리

subscribe() 함수를 사용해서 옵저버블 스트림을 처리합니다.

this.http.get('/users').subscribe(() => {
  ...
});

컴포넌트 상태가 변경되는 것을 가로채기

컴포넌트 생성주기 함수를 사용합니다.