Angular의 구성 요소를 이해하기 위한 기본 가이드

Angular 구성 요소는 Angular 애플리케이션의 기초로서 사용자 인터페이스의 재사용 가능한 모듈식 부분을 구축하는 방법을 제공합니다. 이 가이드에서는 구조부터 모범 사례까지 Angular 구성 요소의 기본 사항을 다룹니다. Angular를 처음 접하는 사람이든 복습하려는 사람이든 이 기사를 통해 Angular의 구성 요소에 대한 기본적인 이해를 얻을 수 있습니다.

각도 구성요소란 무엇입니까?

Angular에서 컴포넌트는 사용자 인터페이스(UI)의 일부를 제어하는 ​​클래스입니다. 버튼, 탭, 입력, 양식 및 서랍(실제로는 UI의 일부)을 생각해 보세요. 각 구성 요소는 다음과 같이 독립적으로 구성됩니다.

1. HTML 템플릿: UI의 레이아웃과 구조를 정의합니다.
2. CSS 스타일: 구성 요소의 모양과 스타일을 설정합니다.
3. TypeScript 클래스: 구성 요소의 논리와 데이터를 포함합니다.
4. 메타데이터: Angular가 구성요소를 인식하고 사용할 수 있도록 구성 세부정보를 제공합니다.

각 구성 요소는 헤더, 사이드바, 카드 등 페이지의 특정 부분을 나타낼 수 있으므로 모듈식 애플리케이션을 만드는 데 필수적입니다.

앵귤러 컴포넌트의 기본 구조

Angular 구성 요소는 필요한 템플릿, 스타일 및 선택기로 구성하는 @Component 데코레이터를 사용하여 정의됩니다. 기본적인 예는 다음과 같습니다.

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';

  getTitle() {
    return this.title;
  }
}

이 예에서는:

• 선택기는 구성 요소를 나타내는 HTML 태그입니다.
• templateUrl은 HTML 템플릿 파일을 가리킵니다.
• styleUrls는 구성 요소의 CSS 파일을 참조합니다.
• exampleComponent 클래스는 구성 요소의 데이터와 로직을 보유합니다.

일반적인 구성 요소 폴더 구조

Angular 프로젝트는 일반적으로 Angular CLI를 사용할 때 자동으로 생성되는 구성 요소와 관련 파일을 하나의 폴더에 구성합니다. 구성 요소의 일반적인 폴더 구조는 다음과 같습니다.

• example.comComponent.ts: TypeScript 클래스를 정의합니다.
• example.comComponent.html: HTML 템플릿이 포함되어 있습니다.
• example.comComponent.css: 구성요소 스타일을 보유합니다.
• example.comComponent.spec.ts: 구성 요소에 대한 테스트가 포함되어 있습니다.

구성요소 수명주기

Angular 구성 요소에는 개발자가 다양한 단계에서 작업을 수행할 수 있는 후크가 있는 수명 주기가 있습니다. 일반적으로 사용되는 수명 주기 후크는 다음과 같습니다.

• ngOnInit: 구성 요소가 초기화된 후 호출됩니다.
• ngOnChanges: 데이터 바인딩 속성이 변경되면 트리거됩니다.
• ngOnDestroy: Angular가 구성 요소를 삭제하기 직전에 호출됩니다.

예를 들어 ngOnInit이 사용되는 방법은 다음과 같습니다.

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';

  getTitle() {
    return this.title;
  }
}

수명 주기 후크는 유연성을 제공하므로 구성 요소 수명 주기의 특정 단계에서 로직을 쉽게 관리할 수 있습니다.

구성 요소 간 통신

실제 애플리케이션에서 구성 요소는 데이터를 공유하거나 작업을 트리거하기 위해 서로 상호 작용해야 하는 경우가 많습니다. Angular는 컴포넌트 통신을 위한 여러 가지 방법을 제공합니다.

1. @입력 및 @출력

• @Input: 상위 구성 요소가 하위 구성 요소에 데이터를 전달할 수 있습니다.
• @Output: 하위 구성 요소가 상위 구성 요소에 이벤트를 보낼 수 있도록 합니다.

예:

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

@Component({
  selector: 'app-lifecycle',
  template: '<p>Lifecycle example</p>',
})
export class LifecycleComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized!');
  }
}

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`,
})
export class ChildComponent {
  @Input() childMessage: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Message from child!');
  }
}

2. 서비스 기반 커뮤니케이션

구성 요소가 상위-하위 관계에 있지 않은 경우 Angular 서비스는 데이터와 로직을 공유하는 간단한 방법을 제공합니다. 서비스는 기본적으로 싱글톤입니다. 즉, 앱 전체에 하나의 인스턴스만 존재합니다.

<!-- parent.component.html -->
<app-child [childMessage]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>

다양한 구성 요소에서 서비스 사용:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private messageSource = new BehaviorSubject<string>('Default Message');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

// component-one.ts
import { Component } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-component-one',
  template: `<button (click)="changeMessage()">Change Message</button>`,
})
export class ComponentOne {
  constructor(private sharedService: SharedService) {}

  changeMessage() {
    this.sharedService.changeMessage('Hello from Component One');
  }
}

Angular 구성요소 모범 사례

1. 단일 책임: 가독성과 유지 관리성을 향상시키기 위해 각 구성 요소에 하나의 책임이 있는지 확인하세요.
2. 기능 모듈: 지연 로딩에 도움이 되는 기능 모듈에 관련 구성요소를 구성합니다.
3. 변경 감지 최적화: 성능을 향상하려면 자주 업데이트되지 않는 구성 요소에 OnPush 변경 감지를 사용하세요.
4. 통신을 위한 서비스 사용 제한: 서비스는 데이터 공유에 유용하지만 서비스에 과도하게 의존하면 코드가 긴밀하게 결합될 수 있습니다. 가능하면 부모-자식 통신에 @Input 및 @Output을 사용하세요.
5. 템플릿 단순화: 템플릿을 최대한 단순하게 유지하고 복잡한 로직을 구성 요소 클래스로 이동합니다.

결론

Angular 구성 요소는 확장 가능한 모듈식 애플리케이션 구축의 핵심입니다. 구조, 수명 주기 및 통신 방법을 이해함으로써 이해하기 쉽고 구축하기 쉬운 효율적이고 유지 관리 가능한 애플리케이션을 만들 수 있습니다.

다음 기사에서는 Angular 구성 요소 수명 주기에 대해 더 자세히 알아보고 각 후크를 살펴보고 구성 요소를 효과적으로 관리하는 데 사용할 수 있는 방법을 살펴보겠습니다. Angular의 강력한 수명 주기 기능에 대해 더 자세히 알아보세요!

위 내용은 Angular의 구성 요소를 이해하기 위한 기본 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!