VueJS - 바인딩: 초보자 가이드

안녕하세요, 미래의 Vue.js 슈퍼스타 여러분! Vue.js 바인딩의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 제는 바인딩이 Vue.js를 이렇게 맛있게 만드는 비밀의 소스라고 말씀드릴 수 있습니다. 그럼 손을 놓고 시작해 보겠습니다!

Vue.js에서 바인딩이란?

정밀한 내용에 들어가기 전에 바인딩이 무엇인지 이해해 보겠습니다. Vue.js에서 바인딩은 데이터를 DOM(도큐メント 오브젝트 모델)에 연결하는 방법입니다. 마치 JavaScript 코드와 화면에 나타나는 것 사이에 마법적인 연결을 만드는 것과 같습니다. 멋지죠?

HTML 클래스 바인딩

파티에 입을 옷을 고를 때처럼, 상황에 따라 다른 옷을 고를 수 있습니다. Vue.js에서 HTML 클래스를 바인딩하는 것도 비슷합니다. 데이터에 따라 요소의 외관을 동적으로 변경할 수 있습니다.

기본 클래스 바인딩

간단한 예제를 보겠습니다:

<div id="app">
  <p :class="{ active: isActive }">나는 활성화되었나요?</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

이 예제에서 우리는 isActive 데이터 속성에 따라 'active' 클래스를 문단에 바인딩합니다. isActive가 참이면 문단에 'active' 클래스가 적용됩니다. 거짓이면 적용되지 않습니다.

여러 클래스

하지만 여러 클래스를 동시에 처리하고 싶다면 어떻게 하나요? 문제 없습니다! Vue.js는 우리를 위한 해결책을 가지고 있습니다:

<div id="app">
  <p :class="{ active: isActive, 'text-danger': hasError }">
    다중 클래스 바인딩
  </p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: false
  }
})
</script>

여기서 우리는 'active'과 'text-danger' 두 가지 클래스를 바인딩합니다. 문단은 'active' 클래스를 가지지만, hasError를 참으로 변경하지 않는 한 'text-danger' 클래스는 적용되지 않습니다.

배열 문법

우리는 배열을 사용하여 클래스를 바인딩할 수도 있습니다. 마치 옷장에 여러 가지 옷을 가지고 있는 것처럼:

<div id="app">
  <p :class="[activeClass, errorClass]"> 배열 문법이 멋질 거예요!</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

이 경우, 'active'과 'text-danger' 클래스가 모두 문단에 적용됩니다.

인라인 스타일 바인딩

이제 인라인 스타일에 대해 이야기해 보겠습니다. 마치 요소에 즉시 마이크로 메이크오버를 주는 것처럼!

객체 문법

인라인 스타일을 객체를 사용하여 바인딩할 수 있습니다:

<div id="app">
  <p :style="{ color: textColor, fontSize: fontSize + 'px' }">
    나를 스타일링해 줘!
  </p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    textColor: 'red',
    fontSize: 20
  }
})
</script>

이렇게 하면 색상이 빨간색이 되고 글자 크기가 20px가 됩니다. 스타일 속성은 camelCase(fontSize) 또는 kebab-case('font-size')를 사용할 수 있습니다.

배열 문법

스타일 객체의 배열을 사용할 수도 있습니다:

<div id="app">
  <p :style="[baseStyles, overridingStyles]">스타일 배열</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'blue',
      fontSize: '20px'
    },
    overridingStyles: {
      fontWeight: 'bold'
    }
  }
})
</script>

이렇게 하면 여러 스타일 객체를 적용할 수 있으며, 배열에서 더 나중에 오는 객체는 충돌이 있을 경우 이전 객체를 덮어씁니다.

폼 입력 바인딩

폼 입력 바인딩은 Vue.js가 정말 빛나는 부분입니다. 마치 폼 입력과 데이터 사이에 직통전화线路을 가지고 있는 것처럼!

텍스트 입력

간단한 텍스트 입력을 시작해 보겠습니다:

<div id="app">
  <input v-model="message" placeholder="수정해 보세요">
  <p>메시지는: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
</script>

v-model 디렉티브는 입력과 message 데이터 속성 간에 양방향 바인딩을 만듭니다. 입력에서 발생하는 모든 변경은 즉시 message에 업데이트되고, 반대로도 마찬가지입니다.

체크박스

체크박스는 작은 켜고 끄는 스위치입니다. 이렇게 바인딩합니다:

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checked: false
  }
})
</script>

체크박스가 체크되면 checked 속성이 참이 되고, 체크가 해제되면 거짓이 됩니다.

라디오 버튼

라디오 버튼은 여러 가지 중 하나를 선택할 수 있는 다양한 질문입니다. 동시에 하나만 선택할 수 있습니다:

<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>선택됨: {{ picked }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    picked: ''
  }
})
</script>

picked 속성은 선택된 라디오 버튼의 값을 가지게 됩니다.

선택 드롭다운

마지막으로 선택 드롭다운을 살펴보겠습니다:

<div id="app">
  <select v-model="selected">
    <option disabled value="">하나를 선택하세요</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>선택됨: {{ selected }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})
</script>

selected 속성은 선택된 옵션의 값을 가지게 됩니다.

바인딩 방법 요약

이제 우리가 다룰 바인딩 방법의 빠른 참조 표를 보여드리겠습니다:

바인딩 유형	문법	설명
클래스 (객체)	:class="{ className: condition }"	조건에 따라 클래스 적용
클래스 (배열)	:class="[class1, class2]"	여러 클래스 적용
스타일 (객체)	:style="{ property: value }"	인라인 스타일 적용
스타일 (배열)	:style="[styleObject1, styleObject2]"	여러 스타일 객체 적용
폼 입력	v-model="dataProperty"	폼 입력과 데이터 속성 간 양방향 바인딩

이제 Vue.js 바인딩의 fascinaiting 세계로의 첫 걸음을 내셨습니다. 연습이 완벽을 만든다는 것을 기억하고, 이 개념들을 실험해 보지 마세요. 얼마 지나지 않아 바인딩을 마스터하실 것입니다! 행복한 코딩을 기원합니다!

Credits: Image by storyset