컴포넌트 이해하기

컴포넌트는 Angular 애플리케이션을 구성하는 기본 요소입니다. 이 단원에서는 컴포넌트와 컴포넌트의 생명 주기에 대해 배웁니다.

컴포넌트는 HTML, CSS, TypeScript 코드가 포함된 UI의 한 부분입니다. 애플리케이션 사용자 인터페이스의 일부를 나타냅니다.

Angular CLI를 사용하면 컴포넌트를 쉽게 만들 수 있습니다:

ng generate component my-component

ng generate component my-component

Angular 컴포넌트에는 일반적으로 네 가지 주요 파일이 있습니다:

• .html: 템플릿
• .ts: 로직
• .css: 스타일
• .spec.ts: 테스트

@Component 데코레이터는 컴포넌트 클래스를 해당 템플릿 및 스타일과 연결합니다.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Angular 컴포넌트에는 특정 시점에 코드를 실행할 수 있도록 해 주는 생명 주기 후크가 있습니다. 일반적인 후크로는 ngOnInit()과 ngOnDestroy()가 있습니다.

ngOnInit()은 Angular가 컴포넌트 데이터를 초기화한 후 실행됩니다. 초기 설정에 유용합니다:

ngOnInit() {
  console.log('Component initialized!');
}

다른 템플릿에서 컴포넌트의 선택자를 사용하여 컴포넌트를 표시하세요:

<app-my-component></app-my-component>

컴포넌트와 컴포넌트를 만드는 방법, 그리고 컴포넌트의 생명 주기 후크에 대해 배웠습니다. 잘하셨습니다!