TIL - 23.12.06(Angular)

로컬 참조(local reference)

로컬 참조는 템플릿 내에서 특정 요소에 직접적으로 접근할 수 있게 해준다.
이는 템플릿과 관련된 컴포넌트 클래스에서 해당 요소에 대한 참조를 얻을 수 있도록 한다.

연습

<input type="text" id="item-input" #newItem>
<button (click)="addItem(newItem.value)">Add Item</button>

#newItem 은 Angular 템플릿에서 로컬(local reference)를 정의하는 방법 중 하나이다. 이는 해당 요소에 템플릿 내에서 직접적으로 접근할 수 있게 해주는데, 주로 템플릿에서 발생하는 이벤트 처리나 DOM 조작 등에 활용된다.

위 코드는 #newItem은 <input> 요소에 로컬 참조

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <input type="text" id="item-input" #newItem>
    <button (click)="addItem(newItem.value)">Add Item</button>
  `
})
export class ExampleComponent {
  addItem(value: string): void {
    console.log('New Item:', value);
    // 여기서 새로운 아이템을 처리하거나 추가하는 로직을 작성할 수 있음
  }
}

Service

Angular에서 서비스는 (일반적으로) 애플리케이션에 필요한 특정 작업을 수행하는 JavaScript 클래스이다.

서비스 생성

ng g s services/todo-list

@Injectable

의존성 주입(Dependency Injection)을 사용할 수 있는 데코레이터

컨텐츠 프로젝션(Cotent Projection)

프로젝션 구현 방식

• 단일 슬롯 컨텐츠 프로젝션
  컴포넌트 외부에서 컨텐츠를 하나만 받는다.
• 다중 슬롯 컨텐츠 프로젝션
  컴포넌트 외부에서 컨텐츠를 여러 개 받는다.
• 조건별 컨텐츠 프로젝션
  특정 조건에 맞는 컨텐츠만 프로젝션
• 특정 조건에 맞는 컨텐츠만 프로젝션해서 렌더링한다.

<ng-content>

<ng-content>는 Angular 컴포넌트에서 사용되는 특별한 태그로서, 부모 컴포넌트에서 자식 컴포넌트로 컨텐츠를 전달하는 데 사용된다.
일반적으로 Angular에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 떄는 @input 데코레이터를 사용한다. 그러나 <ng-content>는 컴포넌트의 템플릿 내에서 선언된 내용을 동적으로 포함할 수 있도록 해준다.

<ng-template>

컴포넌트가 조건에 따라 컨텐츠를 렌더링해야 하거나 한 컨텐츠를 여러번 렌더링해야 한다면 <ng-template> 엘리먼트를 사용해서 렌더링 조건을 지정할 수 있다.

ngOnInit

Angular의 라이프사이클 훅 중 하나로, 컴포넌트가 초기화될 때 실행되는 메서드이다.
이 메서드는 Angular가 컴포넌트를 생성하고 초기화한 직후에 호출된다. 따라서 컴포넌트의 초기화 로직을 이 메서드 내에서 수행하는 것이 일반적이다.

ngOnInit 메서드는 OnInit 인터페이스를 구현함으로써 사용된다. 따라서 Angular는 해당 메서드를 호출하여 컴포넌트 초기화 시 필요한 작업을 수행할 수 있도록 한다.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<p>Initialized!</p>'
})

export class ExampleComponent implements OnInit {
	ngOnInit(){
      	// 이곳에 컴포넌트 초기화 시 수행할 로직을 작성
    	console.log('Component initialized!');
    }
}

주요 용도
1. 초기 데이터 로드 : 컴포넌트가 초기화될 때 초기 데이터를 가져오거나 초기화할 수 있다.
2. 서비스 호출 : 컴포넌트가 초기화될 때 서비스를 호출하거나 구독할 수 있다.
3. 이벤트 처리 : 초기화 시 필요한 이벤트를 수신하거나 처리할 수 있다.
4. 라우터 파라미터 처리 : 컴포넌트가 초기화될 때 라우터 파라미터를 처리할 수 있다.

결론 : ngOnInit는 컴포넌트 생명주기에 초기화 관련 작업 수행

라우팅

라우팅 앱 생성

ng new routing-app --routing

라우팅 규칙 적용 순서

Angular Router는 라우팅 규칙 중 첫번째로 매칭되는 라우팅 규칙을 적용하기 때문에 라우팅 규칙을 등록하는 순서가 중요하다.
구체적인 라우팅 규칙을 가장 먼저 등록하고 덜 구체적인 라우팅 규칙을 나중에 등록하는 것이 좋다. 그래서 고정된 주소를 먼저 등록 그 다음에 빈 주소를 등록하고, 마지막으로 기본 라우팅 규칙을 등록한다. 그리고 브라우저가 접속한 주소에 해당하는 라우팅 규칙이 하나도 없을 때 적용되는 와일드카드 라우팅 규칙은 가장 마지막에 작성한다.