ㄹㄹ

jungeundelilahLEE·2022년 2월 21일
0

Angular

목록 보기
1/4

app/app.component.ts : root 컴포넌트 (bootstrap: [AppComponent])
^
app/app.module.ts : root 모듈 (bootstrapModule(AppModule))
^
main.ts


Component

컴포넌트의 구분 (app.component.ts)

  1. import 영역
    Angular 라이브러리 모듈의 경우 @가 붙어있으며 경로를 명시 x
    npm을 사용하여 설치한 의존 모듈도 경로를 명시 x
    이외, 상대 경로를 명시 o

  2. @Component 데코레이터 영역
    메타데이터 객체를 인자로 전달
    메타데이터 객체는 컴포넌트 생성에 필요한 정보(셀렉터, 템플릿, 스타일 정의 등)를 담고 있는 객체

    메타데이터
    : '데이터에 관한 구조화된 데이터', '다른 데이터를 설명해 주는 데이터'
    - 대량의 정보 가운데에서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해 일정한 규칙에 따라 콘텐츠에 대하여 부여되는 데이터이다. >> (인스타그램의 해시태그('#')와 유사한 역할)
    - 목적 : 데이터 "표현" & 데이터를 "빨리 찾기"위해

  3. 컴포넌트 클래스 영역
    뷰를 관리하기 위한 로직을 담은 클래스를 정의

** 데코레이터와 컴포넌트 클래스는 연속해서 정의되어야 한다. (그렇지 않으면 인식하지 못함)


표기방식

Angular 고유의 템플릿 문법(Template Syntax) interpolation : {{ }}

  • 컴포넌트 클래스의 데이터를 템플릿에 바인딩한다
  • 데이터 바인딩(Data Binding) 방식

작동방식

컴포넌트는 데이터 바인딩에 의해 템플릿과 컴포넌트 클래스의 데이터를 유기적으로 연계한다.

템플릿
컴포넌트의 뷰를 생성하기 위해 HTML과 Angular의 고유한 템플릿 문법(Template Syntax)으로 작성된 코드이다.

메타데이터 객체
컴포넌트 설정 정보를 담고 있는 객체이다. @Component 데코레이터는 메타데이터 객체를 인자로 전달받아서 컴포넌트 클래스에 반영한다.

컴포넌트 클래스
컴포넌트의 뷰를 생성하는 템플릿의 상태(state)를 관리한다. 데이터 바인딩(Data Binding)을 통해 템플릿에 필요한 데이터를 제공하거나 템플릿에서 발생한 이벤트를 처리한다.


** 컴포넌트는 화면 전환(라우팅)의 단위가 된다.


** 기능을 명확히 설명하는 구성요소의 이름(willy-lee / 케밥케이스).구성요소 타입(component or module).ts

** ES6의 모듈과 다른 Angular의 모듈(NgModule)
관련된 Angular 구성 요소를 하나로 묶어 애플리케이션을 구성하는 하나의 단위로 만드는 역할을 한다. 컴포넌트, 디렉티브, 서비스 등의 Angular 구성요소는 모듈에 등록되어야 사용할 수 있다.


데코레이터

: 데코레이터는 함수로서 런타임에 호출되며 데코레이팅된 클래스(데코레이터 바로 아래에 선언된 클래스)의 생성자(constructor)를 변경할 수 있다.

  1. 클래스 데코레이터
    @Component, @NgModule, @Directive, @Injectable, @Pipe

  2. 프로퍼티 데코레이터
    @Input, @Output, @ViewChild, @ViewChildren, @ContentChild, @ContentChildren, @HostBinding

  3. 메소드 데코레이터
    @HostListener

  4. 파라미터 데코레이터
    @Inject


메타데이터

일반 클래스를 컴포넌트화하기 위해서는 @Component 데코레이터를 해당 클래스 바로 앞에서 호출하여 Angular에게 해당 클래스가 일반 클래스가 아니라 컴포넌트 클래스임을 알려야 한다.
@Component 데코레이터의 또 하나의 역할은 컴포넌트 설정 정보를 담고 있는 메타데이터 객체를 인자로 전달받아서 컴포넌트 클래스에 반영하는 것이다.


메타데이터 객체의 주요 property

  1. selector

seletor는 컴포넌트의 뷰를 마크업으로 표현할 때 사용하는 이름으로 템플릿에서 HTML 요소의 태그 이름처럼 사용한다. Angular는 다른 애플리케이션의 selector 또는 HTML 요소와 충돌을 방지하기 위해 접두사(prefix)를 추가하여 케밥 표기법(예를 들어 app-todo)으로 seletor를 명명하도록 권장하고 있다. 기본 접두사는 app이며 이것은 angular.json에서 확인할 수 있다.("prefix": "app",)

  1. template/templateUrl

컴포넌트는 화면을 구성하는 뷰를 생성하고 관리하는 것이 역할이므로 반드시 뷰를 가져야 한다. 컴포넌트의 뷰는 template 또는 templateUrl 프로퍼티에 선언하며 이것을 템플릿이라 부른다. / 상대 경로를 지정 / 간단할 경우 인라인으로 작성도 가능

3.styles/styleUrls

styles/styleUrls 프로퍼티에는 템플릿을 위한 스타일을 선언한다


component 호출

루트 모듈에 의해 부트스트랩되는 루트 컴포넌트.
루트 컴포넌트 이외의 다른 컴포넌트는, 다른 컴포넌트 호출에 의해 브라우저에 렌더링 된다.

  1. 따라서, 호출하려는 컴포넌트의 selector (selector: 'app-hello')를, 호출하려고하는 컴포넌트의 템플릿(app.component.html)에 포함한다.
    호출된 컴포넌트(hello)는 호출한 컴포넌트(app)의 자식 컴포넌트가 된다.

  2. PLUS 모듈에 컴포넌트를 등록한다.
    모듈은 관련된 angular 구성 요소를 하나로 묶어, 애플리케이션을 구성하는 하나의 단위로 만든다.
    컴포넌트, 디렉티브, 파이프, 서비스 등의 angular 구성요소는 모듈에 등록해야 사용 가능하다. (ng g c 명령어로 컴포넌트 추가할 시, 자동으로 모듈 등록된다.)


@NgModule 데코레이터의 메타데이터 객체의 주요 프로퍼티

propertydesc
declarations컴포넌트, 디렉티브, 파이프의 리스트를 선언
imports의존 관계에 있는 Angular 라이브러리 모듈, 기능 모듈(Feature module)이라 불리는 하위 모듈, 라우팅 모듈, 서드 파티 모듈을 선언
providers주입 가능한 객체(injectable object) 즉 서비스의 리스트를 선언
루트 모듈에 선언된 서비스는 애플리케이션 전역에서 사용할 수 있다.
bootstrap애플리케이션의 진입점(entry point)인 루트 컴포넌트를 선언


Template

template문법 (Template Syntax)

1. 데이터 바인딩인터폴레이션 (Interpolation){{ expression }}
프로퍼티 바인딩 (Property binding)[property]=”expression”
어트리뷰트 바인딩 (Attribute binding)[attr.attribute-name]=”expression”
클래스 바인딩 (Class binding)[class.class-name]=”expression”
스타일 바인딩 (Style binding)[style.style-name]=”expression”
이벤트 바인딩 (Event binding)(event)=”statement”
양방향 데이터 바인딩 (Two-way binding)[(ngModel)]=”property”
2. 빌트인 디렉티브
(Built-in directive)
빌트인 어트리뷰트 디렉티브(Built-in attribute directive)ngClass
ngStyle
빌트인 구조 디렉티브(Built-in structural directive)ngIf
ngFor
ngSwitch
3. 템플릿 참조 변수
(Template reference variable)
4. 템플릿 표현식 연산자
(Template expression operator)


1. 데이터 바인딩

데이터 바인딩 : 뷰와 모델을 하나로 연결하는 것
angular의 데이터 바인딩 : 템플릿(View)과 컴포넌트 클래스의 데이터(Model)를 하나로 묶어 유기적으로 동작하게 하는 것

DOM API를 사용해서 DOM을 직접 조작하는 경우, 뷰와 모델이 긴밀하게 연결되므로, 뷰가 변경되면 로직도 변경될 가능성이 매우 높다.
But, Angular는 DOM에 직접 접근하지 않고 템플릿과 컴포넌트 클래스의 상호 관계를 선언하는 방식을 사용해서, 템플릿이 변경되어도 컴포넌트 클래스를 변경할 필요가 없다.

1. 인터폴레이션...


2. 빌트인 디렉티브



서비스와 의존성주입

profile
delilah's journey

0개의 댓글