λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
πŸ“  archive

Vue.js ν΄λž˜μŠ€μ™€ μŠ€νƒ€μΌ 바인딩 μ μš©ν•˜κΈ°

by HandHand 2021. 3. 2.

πŸ“Œ ν•˜κ³  싢은 것

"νŒλ§€μ€‘" μ΄λΌλŠ” 것을 κ°•μ‘°ν•˜κ³  싢은데..

ꡐ내 학기말 μ‡Όν•‘λͺ° κ΅¬ν˜„ 과제 진행 도쀑 μž₯λ°”κ΅¬λ‹ˆ κΈ°λŠ₯μ—μ„œ μƒν’ˆμ˜ μƒνƒœμ— 따라

ꡬ맀 κ°€λŠ₯ 유무λ₯Ό μ‚¬μš©μžμ—κ²Œ 보여주도둝 ν–ˆμŠ΅λ‹ˆλ‹€.

그런데 λ°‹λ°‹ν•œ ν…μŠ€νŠΈλŠ” μ˜λ―ΈμžˆλŠ” 정보λ₯Ό μ „λ‹¬ν•˜κΈ° 쒋지 λͺ»ν•˜λ‹€ 생각해 μƒνƒœλ³„λ‘œ μŠ€νƒ€μΌμ„ μ μš©ν•˜λŠ” 것을 κ³ λ €ν–ˆλŠ”λ°
Vue.js μ—μ„œλŠ” 동적 클래슀 및 μŠ€νƒ€μΌ 바인딩 을 지원해주고 μžˆμ–΄μ„œ 이λ₯Ό μ μš©ν•΄λ΄€μŠ΅λ‹ˆλ‹€.

 

πŸ“Œ ν΄λž˜μŠ€μ™€ μŠ€νƒ€μΌ 동적 바인딩

Vue.js μ—μ„œλŠ” 데이터λ₯Ό λ™μ μœΌλ‘œ λžœλ”λ§ν•˜κΈ° μœ„ν•΄ v-bind λ₯Ό μ§€μ›ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.
λ”°λΌμ„œ νŠΉμ • μ»΄ν¬λ„ŒνŠΈμ˜ μŠ€νƒ€μΌ ν˜Ήμ€ 클래슀λ₯Ό λ™μ μœΌλ‘œ ν• λ‹Ήν•΄μ£ΌκΈ° μœ„ν•΄μ„œλŠ” ν•΄λ‹Ή κΈ°λŠ₯을 ν™œμš©ν•˜λ©΄ λ©λ‹ˆλ‹€.

크게 객체λ₯Ό 톡해 μ§€μ •ν•˜λŠ” 방법과 배열을 톡해 μ§€μ •ν•˜λŠ” λ°©λ²•μœΌλ‘œ λ‚˜λ‰˜κ²Œ λ˜λŠ”λ°
ν΄λž˜μ„œλ₯Ό λ™μ μœΌλ‘œ ν• λ‹Ήν•˜κΈ° μœ„ν•œ μƒ˜ν”Œ μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄κ³  이번 ν”„λ‘œμ νŠΈμ— μ μš©ν•΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.
(μŠ€νƒ€μΌ λžœλ”λ§μ€ μ‹€μ œ ν”„λ‘œμ νŠΈ 적용 κ³Όμ •μ—μ„œ μ‚¬μš©ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.)

 

두 κ°€μ§€λŠ” 상황에 따라 λ³ΈμΈμ—κ²Œ νŽΈλ¦¬ν•œ 방법을 μ„ νƒν•΄μ„œ ν™œμš©ν•˜λ©΄ λ©λ‹ˆλ‹€.

 

1️⃣ 객체 ꡬ문

객체 κ΅¬λ¬Έμ—μ„œλŠ” v-bind 값에 ν΄λž˜μŠ€λ“€μ„ Object ν˜•νƒœλ‘œ μ •μ˜ν•΄μ£Όλ©΄ λ©λ‹ˆλ‹€. λ‹€μŒκ³Ό 같은 μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

<div class="static" v-bind:class="{ active: isActive, error: hasError }"></div>

이 경우 isActive 값이 true 일 λ•Œλ§Œ active λΌλŠ” ν΄λž˜μŠ€κ°€ λ°”μ•ˆλ”©λ©λ‹ˆλ‹€. (error 도 λ§ˆμ°¬κ°€μ§€)


λ”°λΌμ„œ 두 값이 λͺ¨λ‘ true μΌλ•Œ μ΅œμ’… λžœλ”λ§ λ˜λŠ” μ»΄ν¬λ„ŒνŠΈλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

<div class="static active error"></div>

μ΄λ•Œ static은 바인딩 λ˜μ–΄ μžˆμ§€ μ•Šμ€ 정적인 ν΄λž˜μŠ€μ΄λ―€λ‘œ isActive의 μœ λ¬΄μ™€ 관계없이 μΆ”κ°€λ©λ‹ˆλ‹€.

2️⃣ λ°°μ—΄ ꡬ문

λ°°μ—΄ ꡬ문은 μ—¬λŸ¬κ°œμ˜ 클래슀 ν˜Ήμ€ μŠ€νƒ€μΌμ„ λ°°μ—΄ ν˜•νƒœλ‘œ μ •μ˜ν•˜μ—¬ λ‚˜νƒ€λ‚΄λŠ” κ²ƒμž…λ‹ˆλ‹€.
ν•œκ°€μ§€ 차이점은 λ™μ μœΌλ‘œ λžœλ”λ§ν•˜κ³  μ‹Άλ‹€λ©΄ μ‚Όν•­ μ—°μ‚°μž ν˜Ήμ€ 객체 ꡬ문 을 같이 ν™œμš©ν•΄μ•Ό ν•œλ‹€λŠ” μ μž…λ‹ˆλ‹€.

 

쑰건이 μ—†λŠ” 클래슀 λ‚˜μ—΄μ€ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

λ§Œμ•½ 쑰건뢀 λžœλ”λ§μ΄ ν•„μš”ν•˜λ‹€λ©΄ λ‹€μŒκ³Ό 같이 내뢀에 μ‚Όν•­ μ—°μ‚°μž λ₯Ό μ‚¬μš©ν•˜κ±°λ‚˜ 객체 ꡬ문 을 같이 μ‚¬μš©ν•˜λ©΄ λ©λ‹ˆλ‹€.

μ‚Όν•­ μ—°μ‚°μž

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

내뢀에 객체 ꡬ문 ν™œμš©

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 

πŸ“Œ ν”„λ‘œμ νŠΈμ— μ μš©ν•˜κΈ°

ν˜„μž¬ 각 μƒν’ˆμ— λŒ€ν•œ μ •λ³΄λŠ” λ³„λ„μ˜ μ»΄ν¬λ„ŒνŠΈλ‘œ λžœλ”λ§ν•΄μ£Όκ³  μžˆλŠ” μƒν™©μž…λ‹ˆλ‹€.

각각의 μΉ΄λ“œλŠ” λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈλ‘œλΆ€ν„° props 둜 μƒν’ˆμ— λŒ€ν•œ 정보λ₯Ό 전달받고 μžˆμœΌλ―€λ‘œ

이쀑 ν˜„μž¬ μƒν’ˆμ˜ 판맀 유무λ₯Ό λ‚˜νƒ€λ‚΄λŠ” status 값을 ν™œμš©ν•΄ λ™μ μœΌλ‘œ λžœλ”λ§ν•΄μ£Όλ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

μ΄λ²ˆμ—λŠ” 클래슀 바인딩 이 μ•„λ‹Œ μŠ€νƒ€μΌ 바인딩 을 μ μš©ν•΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

μŠ€νƒ€μΌ λ°”μΈλ”©μ˜ 경우 μ μš©ν•˜κ³ μž ν•˜λŠ” μŠ€νƒ€μΌμ„ Camel case 둜 μž‘μ„±ν•΄μ„œ Javascript 객체 ν˜•νƒœλ‘œ μ „λ‹¬ν•΄μ€˜μ•Όν•©λ‹ˆλ‹€.

μŠ€νƒ€μΌ 객체 μ„ μ–Έ

ν˜„μž¬ μƒν’ˆμ΄ νŒλ§€μ€‘μΌλ•ŒλŠ” μ΄ˆλ‘μƒ‰, 그렇지 μ•Šλ‹€λ©΄ 뢉은색을 μ μš©ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

data() {
    return {
      onSale: {
        color: 'darkseagreen',
      },
      soldOut: {
        color: 'crimson',
      },
    }
  },

ν…œν”Œλ¦Ώ μ½”λ“œ

κΈ°μ‘΄μ—λŠ” 아직 μŠ€νƒ€μΌμ΄ 적용 μ•ˆλœ λ‹¨μˆœν•œ span νƒœκ·Έμž…λ‹ˆλ‹€.

<span>{{ statusMessage }}</span>

이제 μœ„ μ½”λ“œλ₯Ό μ•„λž˜μ™€ 같이 λ°”κΏ”μ€λ‹ˆλ‹€.

<span :style="[status ? soldOut : onSale]">{{ statusMessage }}</span>

κ²°κ³Ό ν™”λ©΄

 

πŸ“Œ μ°Έκ³  자료

λ°˜μ‘ν˜•

πŸ’¬ λŒ“κΈ€