컴포넌트 셀렉터

팁: 이 가이드 문서는 핵심 가이드 이후 내용을 다룹니다. 아직 Angular에 익숙하지 않다면 해당 문서를 먼저 읽어보세요.

컴포넌트는 컴포넌트가 위치하는 곳을 지정하기 위해 CSS 셀렉터를 지정합니다:

      
@Component({  selector: 'profile-photo',  ...})export class ProfilePhoto { }
    

그러면 다른 컴포넌트의 템플릿에서 매칭되는 HTML 엘리먼트를 만나면 해당 위치에 컴포넌트가 생성됩니다:

      
@Component({  template: `    <profile-photo />    <button>Upload a new profile photo</button>`,  ...,})export class UserProfile { }
    

Angular는 컴파일 타임에 셀렉터를 정적으로 매칭합니다. 그래서 실행 시점에 Angular 바인딩 문법이나 DOM API로 DOM이 변경되는 것은 컴포넌트 렌더링에 영향을 미치지 않습니다.

엘리먼트는 하나의 컴포넌트 셀렉터에만 매칭됩니다. 한 엘리먼트에 컴포넌트 셀렉터가 여러개 매칭되면 에러가 발생합니다.

컴포넌트 셀렉터는 대소문자를 구분합니다.

셀렉터의 종류

Angular는 기본 CSS 셀렉터 타입의 하위 집합으로만 컴포넌트 셀렉터를 지원합니다:

어트리뷰트 값이 지정되면 Angular는 등호(=) 연산자를 사용해서 어트리뷰트 값을 비교합니다. 다른 연산자는 지원하지 않습니다.

Angular 컴포넌트 셀렉터는 자손 결합자(descendant combinator)나 자식 결합자(child combinator) 등 결합 선택자를 지원하지 않습니다.

Angular 컴포넌트 셀렉터는 네임스페이스를 지원하지 않습니다.

:not 가상 클래스

Angular는 :not 가상 클래스를 지원합니다.

이 가상 클래스를 사용하면 컴포넌트 셀렉터가 매칭되는 엘리먼트 범위를 좁힐 수 있습니다. [dropzone] 어트리뷰트 셀렉터를 사용하지만 textarea 엘리먼트에는 매칭하지 않는다고 합시다:

      
@Component({  selector: '[dropzone]:not(textarea)',  ...})export class DropZone { }
    

:not 외 가상 클래스는 지원하지 않습니다.

셀렉터 조합하기

셀렉터는 여러개를 조합해서 지정할 수도 있습니다. type="reset" 어트리뷰트가 지정된 <button> 엘리먼트를 매칭하려면 이렇게 지정하면 됩니다:

      
@Component({  selector: 'button[type="reset"]',  ...})export class ResetButton { }
    

쉼표(,)로 구분하면 셀렉터를 여러개 지정할 수도 있습니다:

      
@Component({  selector: 'drop-zone, [dropzone]',  ...})export class DropZone { }
    

셀렉터를 여러개 지정하면 셀렉터 중 어느 하나에 매칭되는 엘리먼트마다 컴포넌트를 생성합니다.

셀렉터 정하기

컴포넌트는 대부분 커스텀 엘리먼트 이름으로 셀렉터를 지정합니다. 따라서 HTML 스펙에서 정하는 커스텀 엘리먼트 규칙에 따라 하이픈(-)을 최소한 하나 포함해야 합니다. Angular는 어떠한 컴포넌트와도 매칭되지 않 커스텀 태그를 확인하면 버그와 오타를 방지하기 위해 에러를 발생시킵니다.

Angular 템플릿에서 네이티브 커스텀 엘리먼트 활용방법을 자세하게 알아보려면 심화 컴포넌트 설정 문서를 참고하세요.

셀렉터 접두사

Angular 팀은 프로젝트에 정의된 모든 커스텀 컴포넌트에 짧고 일관된 접두사 사용을 권장합니다. 예를 들어 Angular로 YouTube를 만든다면 yt- 접두사를 사용해서 컴포넌트를 yt-menu, yt-player 와 같이 만드는 식입니다. 셀렉터의 접두사를 네임스페이스처럼 사용하면 컴포넌트가 어떤 라이브러리에서 왔는지 쉽게 구분할 수 있습니다. Angular CLI로 생성한 프로젝트의 기본 접두사는 app- 입니다.

Angular 프레임워크 자체 API의 셀렉터 접두사는 ng 입니다. 그래서 커스텀 컴포넌트에 ng 접두사를 사용하면 안됩니다.

어트리뷰트 셀렉터는 언제 사용해야 할까요?

표준 네이티브 엘리먼트에 컴포넌트를 적용하려면 어트리뷰트 셀렉터 사용을 고려해야 합니다. 표준 <button> 엘리먼트에 추가 기능을 구현하려는 경우는 다음과 같이 어트리뷰트 셀렉터를 사용하면 됩니다:

      
@Component({  selector: 'button[yt-upload]',   ...})export class YouTubeUploadButton { }
    

이렇게 구현하면 추가 작업 없이 기존에 존재하는 엘리먼트에 커스텀 컴포넌트를 적용할 수 있습니다. 이 방식은 aria-label과 같이 ARIA 어트리뷰트를 지정하는 경우에 특히 유용합니다.

그런데 커스텀 어트리뷰트 셀렉터는 매칭되는 컴포넌트가 없더라도 Angular가 에러를 발생시키지 않습니다. 그래서 어트리뷰트 셀렉터를 사용할 때는 컴포넌트나 컴포넌트가 등록된 NgModule을 로드하는 것을 깜빡해서 컴포넌트가 렌더링되지 않을 수 있습니다. 자세한 내용은 컴포넌트 사용하기 문서를 참고하세요.

컴포넌트 셀렉터를 어트리뷰트 셀렉터로 사용한다면, 소문자(lowercase)나 대시-케이스(dash-case)로 지정해야 합니다. 접두사를 사용하는 방식은 위에서 설명한 방식을 따르면 됩니다.