Angular의 구성 요소를 이해하기 위한 기본 가이드-JS 튜토리얼-php.cn

A Basic Guide to Understanding Components in Angular

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

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

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

HTML 템플릿: UI의 레이아웃과 구조를 정의합니다.
CSS 스타일: 구성 요소의 모양과 스타일을 설정합니다.
TypeScript 클래스: 구성 요소의 논리와 데이터를 포함합니다.
메타데이터: 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 구성요소 모범 사례

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