Angular 컴포넌트 클래스 파일

어떤 컴포넌트의 주요 부분은 그 기능, 즉 실제 프로그램입니다. Angular에서 컴포넌트의 기능은 TypeScript 언어로 작성되며 객체지향 프로그래밍 클래스를 나타냅니다.

각 컴포넌트에서 이 클래스는 확장자가 .ts인 파일에 위치합니다. 우리의 주요 컴포넌트에서는 app.component.ts 파일이 될 것입니다.

이 파일의 내용을 살펴보겠습니다. 먼저 우리 컴포넌트의 클래스를 확인하세요:

export class AppComponent {
	title: string = 'test';
}

이 클래스에는 데코레이터 @Component가 적용됩니다. 이 데코레이터는 매개변수로 객체를 받아 우리 컴포넌트를 구성합니다:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

templateUrl 속성에는 컴포넌트의 마크업을 포함하는 파일 경로가 지정됩니다.

styleUrls 속성에는 컴포넌트 마크업을 스타일링하는 CSS 파일 경로 배열이 지정됩니다. 보시다시피 스타일 파일은 하나가 아닐 수 있습니다.

selector 속성에는 컴포넌트의 HTML 코드가 출력(마운트)될 HTML 태그의 선택자가 지정됩니다. 우리의 경우 app-root라는 이름을 볼 수 있습니다. 이 이름은 동일한 이름의 태그에 해당합니다. 이 태그는 src/index.html 레이아웃 파일에 작성되어 있습니다. 이 태그가 작성된 위치에 우리 컴포넌트의 마크업이 삽입될 것입니다.

imports 속성에는 컴포넌트로 임포트되는 모듈들이 지정됩니다.

standalone 속성에는 항상 true 값이 지정됩니다. 현재 이는 Angular의 서비스적인 부분이므로, 일단 깊이 이해하지 않아도 됩니다.

app.component.ts 파일을 열어서 살펴보세요.

스타일 파일을 여러 개 만들고 데코레이터에서 연결해 보세요.