Week 7. 신세계 Vue 탐험 (2)

클래스/스타일 바인딩, v-if, v-show, v-cloak, 리스트렌더링, 이벤트핸들링

클래스와 스타일 바인딩

• v-bind에 여러 개의 클래스(스타일)를 달고 싶을 경우,
  class 값으로 {키: 값} 형태로 넣어주면 됨.

<!--HTML-->
<h1 :class="{ 넣을 클래스: 데이터 속성, 넣을 클래스(2): 데이터 속성(2) }"></h1>

// JS
const App = {
  data() {
    return {
      데이터속성: false,
      데이터속성(2): true
    }
  }
}

v-on에 여러 개의 이벤트를 달고 싶은 경우,
메서드를 실행하고 ;으로 마무리 해줘야 함.
(Vue.js 3 버전에선 ,로도 가능)

<h1 @click="toRed(); increase()"></h1>
<h1 @click="toRed(), increase()"></h1> <!--Vue.js 3 버전-->

조건부 렌더링

• v-if, v-else-if,v-else 디렉티브 사용

<h1 v-if="isShow">Hi</h1>
<template v-else-if="{}"> <!--template 태그는 렌더링되지 않음-->
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
</template>
<h1 v-else>Etc</h1> <!--isShow가 falsy일 때 렌더링-->

⭐️ template태그는 렌더링되지 않고 내용물만 렌더링됨.

• v-show 태그로 display:none을 줬다 풀었다 할 수 있음.
  v-show로 해당 요소가 토글될 때{{}}의 텍스트가 일시적으로 보일 수 있음!!
  👉🏻 이를 방지하기 위해 v-cloak도 함께 사용해주기
  
  v-cloak: DOM 요소가 렌더링되기 전까지 해당 요소를 display:none 함.
  Vue.js가 mounted되고 나면 v-cloak을 해당 요소에서 제거하게 되는데
  mounted가 되기 전에 display:none으로 요소를 감춰서 안전하게 텍스트를 안보이게 할 수 있음.

<!--HTML-->
<style>
  [v-cloak] {
    display: none;
  }
<style>

<h1 v-if="isShow" v-cloak>{{ txt }}</h1>

// JS
const App = {
  data() {
    return {
      txt: 'Hi!',
      isShow: true
    }
  }
}

v-if VS v-show

v-if:조건이 false일 땐 해당 요소를 html에 구조적으로 만들지 않음.
👉🏻 초기 렌더링 비용이 낮음. 전환 비용이 높음
v-show: 조건이 false일 떈 해당 요소를 html에 구조적으로 만들고,
display 속성을 none으로 줌.
👉🏻 초기 렌더링 비용이 높음. 전환 비용이 낮음

😉 우선적으로 v-if를 사용 후, 전환비용이 높을 때 v-show로 교체

참고) v-if와 v-for 같이 사용하지 말기

스타일 가이드 | Vue 공식문서

• v-if가 더 높은 우선순위를 가짐.
• template 태그로 두 디렉티브를 분리해 사용

리스트 렌더링

객체 반복

• 객체를 반복할 때 매개변수가 value, key, index 이 순서로 들어온다.

<li v-for="(value, key, index) in object">
  {{ value }}
</li>

• ⚠️ 객체를 반복할 때 객체 내부에 나열된 순서가 보장되지 않는다.
  JS 엔진이 Object.keys() 키 나열 순서를 구현하며 일관적이지 않다.
  👉🏻 따라서 index와 매칭시키지 말 것!

정수 반복

• v-for로 정수를 반복할 경우, index는 1부터 시작한다.

<li v-for="n in 10">
  {{ n }} <!--1 ~ 10-->
</li>

상태 유지

• v-for와 단짝인 key
  Vue.js는 데이터 항목의 순서가 변경된 경우
  순서가 일치하도록 나름대로 최적화 과정을 거친다.
  이때 각 아이템에 key 속성으로 Vue가 최적화과정을 진행할 수 있도록 돕자.

<li v-for="item in lists" :key="item.id">
</li>

👉🏻 또한 key는 요소가 고유함을 나타낼 때 사용할 수 있다!

이벤트 핸들링

순서에 상관없이 이벤트 객체 받기: $event

<!--html-->
<h1 @click="method('first', $event)"></h1>

// JS
const App = {
  methods: {
    method(first, event) {
      console.log(first, event)
    }
  }
}

이벤트 수식어

이벤트 수식어 | Vue 공식문서

• .self
  currentTarget === target이 같을 때만 실행

• .passive
  화면의 렌더링과 로직의 동작을 분리해서 처리.
  👉🏻 모바일 환경에서 잘 활용됨!

키 수식어

키 수식어 | Vue 공식문서

<input   @keyup.enter="submit"/> <!--키가 enter일 경우만 실행-->
<input   @keyup.alt.enter="clear"/> <!--키가 alt랑 enter를 누를 경우만 실행-->

• .meta === cmd
  ⚠️ meta는 keyup 이벤트가 아닌 key-down이벤트에만 작동

• exact
  정확한 조합을 눌렀을 때만 실행

form 입력 바인딩

단뱡향 👉🏻 양방향 데이터 바인딩

<form>
  <input :value="txt"/>
</form>

const App = {
  data() {
    return {
      txt: ''
    }
  }
}

단방향 데이터 바인딩: 한쪽에서만 데이터를 변경할 수 있을 때 ex) v-bind

• input 입력으로 value가 바뀌어도 data의 txt는 바뀌지 않음.

양방향 데이터 바인딩: 양쪽에서 데이터를 변경할 수 있음. ex) v-model

<form>
  <h1>{{ txt }}</h1>
  <input v-model="txt"/>
</form>

⚠️ v-model은 한글을 실시간으로 반영하지 못함.

• 한글의 자음 + 모음의 글자가 완성되고 다음 글자로 넘어갈 때 인식이 됨.

<!--HTML-->
<main class="app">
  <input :value="txt" @input="txt = $event.target.value"/>
  <h1 >{{ txt }}</h1>
</main>

// JS
const App = {
  data () {
    return {
      txt: 'Hello Vue!'
    }
  }
}
const app = Vue.createApp(App).mount('.app');

따라서 한글로 양방향 데이터 바인딩을 할 땐 위와 같이 이벤트를 활용할 것.

checkbox와 배열

<!--HTML-->
<main class="app">
  <input v-model="checked" type="checkbox" value="a"> <!--✅-->
  <input v-model="checked" type="checkbox" value="b"> <!--✅-->
  <input v-model="checked" type="checkbox" value="c"> <!--✅-->
</main>

// JS
const App = {
  data () {
    return {
      checked: [] // [{0: a}, {1: b}, {2: c}]
    }
  }
}
const app = Vue.createApp(App).mount('.app');

체크박스에 체크된 value가 배열요소로 들어감.

수식어

• .lazy

<!--HTML-->
<input v-model.lazy="txt">

@input 이벤트가 아닌 @change 이벤트(e.g, enter 등) 이후에 txt 데이터가 동기화 됨.
(뒤늦게 데이터가 갱신됨)