[개발자의품격][부트캠프][1기][19차시] Vue.js #4 | extra

extra

v-if

HTML DOM 요소를 보이기/숨기기 위해 실무에서는 v-if 문법을 주로 사용한다. 사용자의 권한에 따라 부여하는 기능을 달리할 때 사용할 수 있다. if 문은 순차적으로 비교하므로 "일반 사용자 > 매니저 > 관리자" 순으로 사용자가 많으므로 이를 감안하여 순서를 설계하는 것이 유리하다.

<template>
  <div v-if="userRole === 'G'">
    <button>조회</button>
  </div>
  <div v-else-if="userRole === 'M'">
    <button>생성</button>
    <button>조회</button>
  </div>
  <div v-else>
    <button>생성</button>
    <button>조회</button>
    <button>삭제</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      userRole: 'A' // A - 관리자, M - 매니저, G - 일반사용자
    }
  }
}
</script>

 

[그림 1] v-if를 통해 userRole이 'A'인 경우만 렌더링

 

---

 

v-show

v-if는 [그림 2]와 같이 HTML DOM 요소를 생성/삭제한다. DOM 트리를 리페인팅하기 때문에 리소스를 많이 사용한다. 반면 v-show는 [그림 3]과 같이 style에서 보이기/감추기 처리를 한다. 개발자는 사용자의 UX를 항상 고려해야 한다. 이러한 태도는 코드를 개선하는 것보다 더 중요하다.

<template>
  <div>
    <input type="radio" name="" id="ai" v-model="favorite" value="AI" />
    <label for="ai">인공지능</label>
    <input type="radio" name="" id="blockchain" v-model="favorite" value="BC" />
    <label for="blockchain">블록체인</label>
    <input type="radio" name="" id="iot" v-model="favorite" value="IOT" />
    <label for="iot">사물인터넷</label>
    <input type="radio" name="" id="other" v-model="favorite" value="OTH" />
    <label for="other">기타</label>
    <div v-show="favorite === 'OTH'">
      <!-- <div v-if="favorite === 'OTH'"> -->
      <input type="text" name="" id="" v-model="otherValue" />
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      favorite: '',
      otherValue: ''
    }
  }
}
</script>

 

[그림 2] v-if

 

[그림 3] v-show

 

---

 

computed

computed는 새로인 키를 만들 수 있고, 참조하고 있는 다른 데이터 키의 변경 사항을 실시간으로 감지한다. 실무에서는 로그인 사용자 정보를 담기 위해 사용한다.

<template>
  <div>
    <div>
      <input type="text" name="" id="" v-model="firstName" />
      <input type="text" name="" id="" v-model="lastName" />
    </div>
    <div>
      <h1>Welcome, {{ title }} {{ firstName }} {{ lastName }}</h1>
      <h1>computed: Welcome, {{ fullName }}</h1>
    </div>
    <div>
      <p>Welcome, {{ title }} {{ firstName }} {{ lastName }}</p>
    </div>
    <div>
      <h3>Welcome, {{ title }} {{ firstName }} {{ lastName }}</h3>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      firstName: '일남',
      lastName: '김',
      middleName: '',
      title: 'Mr. '
    }
  },
  computed: {
    fullName() {
      return this.title + ' ' + this.firstName + ' ' + this.lastName
    }
  }
}
</script>

 

[그림 4] computed는 데이터의 변경을 실시간을 감지한다.

 

---

 

watch

computed는 변경사항을 감지하여 새로운 데이터를 만들어낸다. 반면 watch는 변경사항만 감지한다. 기존 값에 대하여 사용자가 변경한 값에 대한 history를 기록할 때 유용하다.

<template>
  <div>
    <div>
      <input type="text" name="" id="" v-model="firstName" />
      <input type="text" name="" id="" v-model="lastName" />
    </div>
    <div>
      <h1>Welcome, {{ title }} {{ firstName }} {{ lastName }}</h1>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      firstName: '일남',
      lastName: '김',
      middleName: '',
      title: 'Mr. '
    }
  },
  watch: {
    // 함수명을 데이터의 키값과 동일하게 선언한다.
    firstName() {
      console.log(this.firstName)
    }
  }
}
</script>

 

[그림 4] watch는 변경사항을 감지한다.

 

watch는 기존 값에 대하여 사용자가 변경한 값에 대한 history를 기록할때 유용하다.

<template>
  <div>
    <select name="" id="" v-model="selected">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      selected: '',
      changeHistory: []
    }
  },
  watch: {
    selected(newValue, oldValue) {
      this.changeHistory.push(newValue)
      console.log(this.changeHistory)
    }
  }
}
</script>

 

[그림 5] watch는 기존값, 변경값 history를 기록할 때 유용하다.