자바스크립트 초보자를 위한: ngClass로 동적 클래스 할당하기

웹 앱에서는 조건에 따라 요소의 모양을 맞춤 설정해야 하는 일반적인 요구 사항입니다. 이를 수행하는 몇 가지 방법이 있지만 Angular를 사용하는 경우 선택은 명확합니다. ngClass 지시문은 요소나 구성 요소에 동적으로 클래스 이름을 할당하는 다양한 방법을 제공합니다. 해당 구문은 간결하며 비교적 복잡한 논리를 지원하여 클래스 이름 및 설정 기준에 대한 세부적인 제어를 제공합니다. 이 튜토리얼에서는 ngClass 지시문을 사용하여 요소에 CSS 클래스를 동적으로 할당하는 가장 일반적인 방법 중 일부를 살펴보겠습니다.

[className] 속성 바인딩을 사용하여 CSS 클래스 할당하기

이 문서는 ngClass 지시문에 관한 것이지만, 많은 경우에는 실제로 필요하지 않을 수도 있습니다! [className] 속성 바인딩 덕분에, 우리는 네이티브 JavaScript className 속성을 통해 클래스를 설정할 수 있습니다. 바인딩 구문인 []를 사용하여 바인딩 내에서 문자열을 결과로 반환하는 어떤 문도 실행할 수 있습니다. 이를 통해 조건에 따라 하나 이상의 클래스를 설정할 수 있습니다:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

런타임에서 클래스 이름을 작성할 수도 있습니다:

<div [className]="'class' + someValue"></div>

읽기: 웹 개발자가 배워야 할 5가지 JavaScript 개념

[className]를 통한 클래스 토글링

일부 사람들은 위의 클래스 토글링 기술이 조금 더 복잡하다고 생각합니다. inactive-class는 기본값일 가능성이 높기 때문에 필요 이상으로 복잡할 수 있습니다. 해당 그룹에 속한다면, 조건을 평가할 수 있는 [class.class-name] 구문을 사용할 수 있습니다:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

그래서 우리는 [className] 속성 바인딩을 사용하여 클래스를 조건부로 설정할 수 있다면, 왜 ngClass 지시문이 필요할까요? 우리가 볼 것처럼, ngClass 지시문을 사용하는 진짜 이유는 여러 클래스 중에서 선택할 수 있도록 도와주기 때문입니다.

ngClass 지시문 깊이 파헤치기

ngClass 지시문을 사용하는 방법에 대해 알아보기 전에, 그 정의를 살펴보는 것이 도움이 될 것입니다:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

위 코드를 살펴보면, 앞에서 사용한 [class] 구문이 사실 ngClass 지시문의 일부인 것을 알 수 있습니다. 또한 ngClass 지시문은 동적 클래스를 설정하는 데 사용할 수 있는 옵션을 4개나 제공한다는 점을 주목하세요! 

이를 자세히 살펴보겠습니다.

문자열 또는 문자열[] 제공

문자열 또는 문자열 배열을 ngClass에 할당하면 Angular 변수에 동적 클래스를 바인딩할 수 있습니다. activeClass와 같은 변수가 있다고 가정해보겠습니다. .ts 파일에서 어떤 작업의 결과에 따라 "text-success" 또는 "text-failure"와 같은 알려진 클래스 이름으로 설정할 수 있습니다:

<div 
  [ngClass]="activeClass">
</div>

배열 구문은 동일한 요소나 구성 요소에 여러 클래스를 적용하는 데 유용합니다:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

평가된 표현식 사용

ngClass를 사용하는 조금 더 고급이면서 매우 유용한 방법은 표현식을 제공하는 것입니다. 제공된 클래스는 변수나 표현식이 true로 평가될 때에만 적용됩니다. 표현식을 제공하려면 중괄호 {}를 사용하여 객체를 제공해야 합니다. 각 콜론의 왼쪽에는 클래스가 적용될 속성 이름이 있고, 오른쪽에는 적용될 클래스가 있습니다. 여기 예시가 있습니다:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

읽기: React, Angular 및 Vue.js: 기술적 차이는 무엇인가요?

삼항 연산자 사용

삼항 연산자를 사용하면 불리언 표현식에 따라 변수에 값을 할당할 수 있습니다. 이는 불리언 필드이거나 불리언 결과로 평가되는 문장일 수 있습니다. 가장 기본적인 형태의 삼항 연산자는 조건 연산자로도 알려져 있으며, 변수를 설정할 때 if/then/else 문의 대안으로 사용할 수 있습니다.

ngClass에 삼항 연산자를 제공하면 표현식이 참일 때의 클래스와 거짓일 때의 클래스를 지정할 수 있습니다. 삼항 연산자의 기본 구문은 다음과 같습니다:

[ngClass]="expression or variable ? true class : false class"

다음 코드는 두 변수가 동일한지 여부에 따라 DIV의 클래스를 설정하는 데 삼항 연산자를 사용하는 예시입니다:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

Set ngClass 서명: 원치 않고 사랑받지 못하는

Set은 ES6에 도입된 새로운 데이터 구조로, Map과 유사합니다. TypeScript Set을 사용하면 add(), has(), delete()와 같은 메서드를 사용하여 목록에 고유한 값을 저장할 수 있습니다. 어떤 이유로든, Set<string> ngClass 시그니처는 실제로 인기를 얻지 못했습니다. 저는 그것을 사용해본 적이 없으며 누구도 사용한 사람을 알지 못합니다.

그렇지만, Set은 요소나 구성 요소에 적용할 클래스 이름을 나타내는 문자열을 포함해야 합니다. 다음은 클래스를 포함하는 Set인 classes를 생성하는 TypeScript 코드의 예시입니다:

//클래스 멤버 변수 선언
public classes = new Set();
 
//클래스 이름 추가
classes.add('active').add('text-large');

결론

이 튜토리얼에서는 ngClass 지시문을 사용하여 요소에 동적으로 CSS 클래스를 할당하는 일반적인 방법 중 일부를 살펴보았습니다. 보시다시피, 꽤 강력한 기능입니다.