[Udemy Vue 완벽가이드 Section2] 34. 동적으로 CSS 클래스 추가하기

인라인 스타일을 동적으로 바인딩 하는 방법을 알아보았다.

2023.07.10 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링

[Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링

 

 

인라인 스타일을 동적으로 바인딩해도 작동하지만, 여러 단점이 있어 자주 사용하지 않는다.(아래 참고)

1. 코드의 가독성이 떨어진다 : 각 HTML 요소마다 직접 스타일 속성을 지정하므로, HTML 코드가 길어지고 복잡해질 수 있다. 스타일 속성이 많을 경우, 코드의 가독성이 저하될 수 있다.

2. 유지보수가 어렵다 : 스타일 변경 시, 각 HTML 요소를 찾아 수정해야한다. 이는 유지보수 과정을 어렵게 만들고 실수를 유발할 수 있다. 스타일을 일괄적으로 수정하려면 모든 HTML 요소를 확인해야하므로 작업이 번거롭다.

3. 재사용성이 제한된다 : 인라인스타일은 특정 HTML요소에 직접 적용되므로, 다른 요소에서 동일한 스타일을 재사용하기 어렵다.

4. CSS 우선순위에 영향을 준다 : 인라인스타일은 외부 CSS 스타일 규칙과 충돌하는 경우, 우선 적용된다. 이로 인해 스타일관리와 오류 디버깅이 어려워질 수 있다.

 

 

대안으로, CSS 클래스를 동적으로 바인딩 하는 방법을 알아보자!

style.css파일로 가서 새 css 클래스를 추가해보자.

.active {
  border-color: red;
  background-color: salmon;
}

 

위 active 클래스를 동적으로 <div>요소에 추가하려고 한다.

class 속성을 동적으로 바인딩할 수 있는데, v-bind를 사용하거나 콜론(:)만 있는 축약어를 사용한다.

class에는 문자열이 필요하다.

boxASelected 프로퍼티를 삼항연산자로 표현한다.

아래 예시의 경우, boxASelected의 값이 true일 경우(박스 A가 선택될 때), class값은 demo active, false일 경우 demo가 된다.

<div :class="boxASelected? 'demo active' : 'demo'"></div>

 

 

하지만 위 코드가 최선인건 아니다. 가독성도 떨어지는 편이고, 만약 동적으로 토글할 클래스가 많아지면 훨씬 더 읽기가 힘들어진다.

다행히 Vue.js에는 특별한 구문을 지원한다.

style 속성과 동일하게 class 속성에도 객체를 전달할 수 있다. (v-bind를 하지않으면 작동하지 않는다.)

<div class="{}"></div><!--이처럼 v-bind로 바인딩하지않는 경우, 객체는 작동하지않는다.-->

 

 

바인딩하면 Vue가 객체구문을 지원하고 프로퍼티를 추가할 수 있는데, 해당 프로퍼티 이름은 CSS 클래스를 반영하고, 그 프로퍼티 값은 ture 혹은 false 이거나 truthy(참) 혹은 falsy(거짓)인 결과로서 class의 추가 여부를 보여준다.

<div :class="{demo:true, active:boxASelected}"></div>

- demo: true로 설정하여 항상 추가되도록.

- active: boxASelected가 true면 active 클래스가 <div>에 추가되도록, false면 <div>에 추가되지 않도록.

 

위 예시의 경우 demo라는 class는 항상 있고, active 클래스는 boxASelected가 true일 때만 추가된다.

 

인라인 스타일 적용했을 때와 동작은 동일하지만, 코드는 훨씬 더 읽기 쉬워졌다.

class가 더 많아질수록 가독성과 유지관리를 하는데 더 좋다.

 

 

 

위 코드를 좀 더 단순화해보자.

demo클래스는 항상 추가되므로 demo:true 설정은 중복된다. 그러니 객체에서 삭제.

대신 바인딩되지않은 class속성을 추가하여 'demo'를 추가한다.

<div class="demo" :class="{active: boxASelected}"></div>
<!--class="demo"는 동적 바인딩x. 일반적인 class속성이다. Vue가 인식하고 변경하지x-->
<!--:class는 동적으로 바인딩된 class. Vue가 동적클래스바인딩 결과를 하드코딩된 클래스와 병합.-->

 

 

작동은 이전과 동일하게 되지만, 코드가 더 적어지고 관리하기 쉬워졌다.

 

 

**참고

사용자가 박스를 클릭하면 선택-해제 이렇게 토글을 할 수 있게 만드려면 boxSelected함수를 변경한다.

methods: {
 boxSelected(box) {
  if(box === 'A') {
    //this.boxASelected = true;
    this.boxASelected = !this.boxASelected;//기존 boxASelected값이 true였다면, false로 변경, false였다면 true로 변경.
  }
 }
}

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.