[Vue.js] 동적 클래스 바인딩

`<div :class="{ 'backdrop': isShown }">` 구문은 Vue.js에서 동적 클래스 바인딩을 사용하는 예시입니다. 이는 `div` 태그에 `backdrop` 클래스를 조건부로 추가하는데 사용됩니다. 여기서 `isShown`은 Vue 인스턴스의 반응형 데이터로, boolean 값(true 또는 false)을 가질 수 있습니다. 이 구문의 동작 방식을 자세히 설명하겠습니다.

### 동적 클래스 바인딩

Vue.js에서 `:class`는 클래스를 동적으로 바인딩하는 데 사용되는 디렉티브입니다. `:class`는 객체 구문을 통해 조건부로 클래스를 추가할 수 있게 해줍니다. 기본 형식은 다음과 같습니다:

```html

<div :class="{ 'className': condition }">

```
여기서:
- `className`: 적용하려는 CSS 클래스의 이름입니다.
- `condition`: 이 조건이 `true`일 때 `className`이 요소에 적용됩니다. `false`일 경우에는 클래스가 적용되지 않습니다.

### 예시 설명
`<div :class="{ 'backdrop': isShown }">`에서:
- `backdrop`은 적용하고자 하는 CSS 클래스 이름입니다.
- `isShown`은 이 클래스가 적용될지 여부를 결정하는 Vue 인스턴스의 데이터 속성입니다. 

이 구문의 의미는 `isShown`의 값이 `true`일 때 `div`에 `backdrop` 클래스가 추가되고, `false`일 때는 클래스가 제거된다는 것입니다. 이를 통해 `isShown`의 값에 따라 스타일이 동적으로 변경될 수 있습니다. 

### 사용 사례
이러한 방식은 주로 UI의 특정 부분을 조건부로 표시하거나 숨기는데 유용합니다. 예를 들어, 사용자가 버튼을 클릭했을 때 모달이나 드롭다운 메뉴 같은 요소를 표시하거나 숨기는 인터페이스를 구현할 때 많이 사용됩니다. `backdrop` 클래스에는 보통 배경색, 투명도, 위치 등을 정의하여 모달 뒷부분에 어두운 막을 생성하는 스타일이 포함될 수 있습니다.

### 정리
이 구문은 Vue.js에서 조건에 따라 요소의 클래스를 쉽게 추가하거나 제거할 수 있게 해주어, 동적인 사용자 인터페이스를 구현할 때 매우 유용합니다. 이를 통해 JavaScript를 사용하지 않고도 템플릿만으로 간단한 조건 로직을 처리할 수 있습니다.

 

---

이걸 안쓰고는?

1. id를 쓰는 방법

 

Vue.js 특정 문법을 사용하지 않고 같은 기능을 구현하려면 일반 HTML, CSS 및 JavaScript를 사용할 수 있습니다. 여기서는 CSS 클래스를 동적으로 변경하고 조건에 따라 요소를 표시하거나 숨기는 방법을 구현하겠습니다.

### HTML

```html

<button onclick="toggleCard()">Toggle</button>
<div id="backdrop" style="display: none;">
    <div class="card">
        <label>REPORTS</label>
        <ul>
            <li>
                <span class="icon"><i class="fa-solid fa-clock"></i></span>
                Real-Time
            </li>
            <li>
                <span class="icon"><i class="fas fa-user"></i></span>
                Audience
            </li>
            <li>
                <span class="icon"><i class="fa-solid fa-flag"></i></span>
                Conversions
            </li>
        </ul>
    </div>
</div>

```

### CSS

CSS는 Vue 예제에서 사용된 것과 동일하게 유지됩니다.

### JavaScript

```javascript

function toggleCard() {
    var backdrop = document.getElementById('backdrop');
    if (backdrop.style.display === "none") {
        backdrop.style.display = "block";
    } else {
        backdrop.style.display = "none";
    }
}

```

이 예제에서는 JavaScript 함수 `toggleCard`를 사용하여 카드의 표시 여부를 제어합니다. 버튼 클릭 이벤트가 발생할 때마다 이 함수가 호출되어 `backdrop` 요소의 `display` 스타일 속성을 `block`과 `none` 사이에서 전환합니다. 이로써 Vue에서 사용한 `v-if`와 유사한 효과를 달성할 수 있습니다.

### 정리
이 방식을 사용하면 Vue.js의 반응형 데이터 시스템이나 템플릿 문법에 의존하지 않고도 동적인 UI를 구현할 수 있습니다. HTML에서 직접 이벤트 핸들러를 관리하고, JavaScript에서는 DOM을 직접 조작하여 필요한 동작을 구현합니다. 이는 프레임워크를 사용하지 않을 때의 일반적인 접근 방식입니다.

 

2. class를 쓰는 방법

네, `id` 대신 `class`를 사용해도 동일한 기능을 구현할 수 있습니다. 여러분이 말씀하신대로 `backdrop`이 페이지에 단 하나만 존재한다면, `class`를 사용하는 것도 좋은 방법입니다. 클래스를 사용하면 코드를 좀 더 유연하게 관리할 수 있습니다. 아래 코드는 `class`를 사용하여 동일한 기능을 구현하는 방법을 보여줍니다.

### HTML

```html

<button onclick="toggleCard()">Toggle</button>
<div class="backdrop" style="display: none;">
    <div class="card">
        <label>REPORTS</label>
        <ul>
            <li>
                <span class="icon"><i class="fa-solid fa-clock"></i></span>
                Real-Time
            </li>
            <li>
                <span class="icon"><i class="fas fa-user"></i></span>
                Audience
            </li>
            <li>
                <span class="icon"><i class="fa-solid fa-flag"></i></span>
                Conversions
            </li>
        </ul>
    </div>
</div>

```

### JavaScript

```javascript

function toggleCard() {
    var backdrop = document.querySelector('.backdrop');
    if (backdrop.style.display === "none") {
        backdrop.style.display = "block";
    } else {
        backdrop.style.display = "none";
    }
}

```

이 예제에서 `document.getElementById()` 대신 `document.querySelector()`를 사용하여 첫 번째로 발견되는 `.backdrop` 클래스를 가진 요소를 선택합니다. 이 방법은 특정 `id`를 요구하지 않으므로 HTML 요소에 클래스만 정의해 주면 됩니다.

### 정리

`class`를 사용하는 방식은 웹 페이지 내에서 해당 클래스를 가진 요소가 여러 개 존재할 수 있는 경우에도 유용하게 사용될 수 있습니다. 하지만 이 예제에서는 `backdrop`이 하나만 존재하므로 `document.querySelector('.backdrop')`를 사용하여 쉽게 접근할 수 있습니다. 이러한 접근 방식은 `id`에 비해 좀 더 범용적으로 활용할 수 있는 장점이 있습니다.