앵귤러 기초(Angular basic) 14.컴포넌트 스타일 캡슐화

컴포넌트의 스타일은 어떻게 관리해야 될까요?

컴포넌트 스타일의 캡슐화에 대해 알아보겠습니다.

 

이번 포스트에선 아래의 내용을 다루고 있습니다.

1. 컴포넌트의 스타일링
2. 컴포넌트 스타일 캡슐화

---

컴포넌트의 스타일링

컴포넌트에 대한 템플릿을 작성할 때 해당 템플릿의 스타일이 필요한 경우가 많이 있습니다.

예를 들어 네비게이션 컴포넌트를 작성할 경우 li 또는 div 요소 스타일링이 필요할 수 있습니다.

 

스타일 필요로 하는 컴포넌트를 다른 컴포넌트 내에 중첩시킬 때(부모 컴포넌트에서 자식 컴포넌트를 쓰는 경우), 우리는 컴포넌트의 고유한 스타일을 가져올 수 있는 방법이 필요합니다.

 

한 가지 선택사항은 템플릿의 HTML에서 직접 스타일을 정의하는 것이지만, 이러한 스타일을 보고 재사용하고 유지 관리하는 것은 더 어렵습니다.

또 다른 옵션은 외부 스타일시트에 스타일을 정의하는 것입니다.

이렇게 하면 유지관리가 쉬워지지만 외부 스타일시트가 index.html에 연결되도록 컨테이너 구성요소에 부담을 줍니다.

따라서 중첩된 구성 요소를 재사용하기가 다소 어려워질 수 있습니다.

이러한 점을 해결하기 위해 앵귤러에서는 스타일의 캡슐화를 지원합니다.

 

컴포넌트 스타일 캡슐화

스타일의 독립적인 적용과 관리를 위해 컴포넌트 데코레이터(@component)에는 컴포넌트 정의의 일부로 스타일을 캡슐화하는 프로퍼티가 있습니다.

styles프로퍼티 사용하기

styles 프로퍼티을 사용하여 구성요소에 고유한 스타일을 직접 추가합니다.

이 styles속성은 배열이므로 여러 스타일을 쉼표로 구분하여 추가할 수 있습니다.

 

styleUrls프로퍼티 사용하기

더 나은 해결책은 하나 이상의 외부 스타일시트를 작성하고 styleUrls 프로퍼티로 식별하는 것입니다.

이 속성 역시 배열이므로 여러 스타일 시트를 쉼표로 구분하여 추가할 수 있습니다.

컴포넌트 내에서 스타일을 캡슐화하면 정의된 selector 또는 스타일 class는 컴포넌트의 템플릿에만 적용되며 프로그램의 다른 컴포넌트로 유출되지 않습니다.

---

이제 실제로 예제에 적용해 보겠습니다.

먼저 MovieListComponent의 외부 스타일시트파일을 만들었습니다.

이 파일에는 MovieListComponent의 스타일만 포함되어 있으므로 movie-list.componet.scss라고 작성하였습니다.

 

이 스타일시트에서 테이블 헤더 스타일을 추가합니다.

이곳에 추가된 스타일들은 MovieListComponent에 캡슐화되어 있고 여기서 정의된 스타일은 애플리케이션의 다른 컴포넌트에 영향을 미치지 않으므로 자유롭게 수정할 수 있습니다.

 

이 새 스타일시트를 사용하기 위해 MovieListComponent를 수정합니다.

Component의 decorator에서 styleUrls속성을 추가하고 배열을 전달합니다.

그리고 배열의 첫 번째 요소에서 스타일시트의 경로를 지정합니다.

예제에서는 위에서 만든 movie-list.componet.scss를 지정하였습니다.

CSS 파일을 컴포넌트와 동일한 폴더에 정의했기 때문에 ./ 상대 경로 구문을 사용할 수 있습니다.

스타일시트가 여러 개 라면 쉼표로 구분하여 스타일시트를 더 추가할 수 있습니다.

예를 들어 [movie-list.componet.scss, movie-list-darkmode.componet.scss]처럼 가능합니다.

 

결과를 브라우저에서  확인해 보겠습니다.

헤더의 색깔이 잘 적용 된걸 확인할 수 있습니다.

이와 같이 컴포넌트의 고유한 스타일을 캡슐화하려는 경우 언제든지 컴포넌트 데코레이터에서 메타데이터의 프로퍼티 styles 또는 styleUrls을 이용할 수 있습니다.

---

여기까지 수고하셨습니다.

다음 포스트는 자꾸만 잊어버리게 되는 라이프 사이클 후크에 대해 알아보겠습니다.