[DAY-36] Vue (3)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
Vanilla JS로 만들었던 프로젝트는 하나 하나 다 설정해줬어야 하는걸
Vue는 몇개의 수식어만으로 모든걸 동작시킵니다.

신기해요..이게 바로 거대한 프래임워크의 세계인가요?

[1] 조건부 렌더링

[1-1] v-if

v-if, v-else-if, v-else 디렉티브를 이용해서 조건부 렌더링이 가능합니다.

<h1 v-if="isShow1">Hello Vue</h1>
<h2 v-else-if="isShow2">Hello Vue2</h2>
<h1 v-else>Hello Vue2</h1>

이때, v-else-if에 연결될 요소들이 여러개일 경우, 새로운 요소로 래핑할 수 있습니다.

새로운 요소가 반영되지 않길 원하면 template 태그를 이용할 수 있습니다.

template 태그는 안의 요소들만 출력하고, 본인은 출력되지 않습니다.

<h1 v-if="isShow1">Hello Vue</h1>
<template v-else-if="isShow2">
  <h2>Hello Vue2</h2>
  <h3>Hello</h3>
  <h4>Hello Hello</h4>
</template>
<h1 v-else>Hello Vue2</h1>

이때 v-if문은 요소를 아예 화면에서 사라지게 만듭니다.

요소의 구조 자체를 주석으로 변환시킵니다.

[*] 특징

데이터가 false인 경우, 렌더링 자체가 되지 않으므로 초기 렌더링 비용이 낮습니다.

하지만 데이터의 값이 변할 때, 렌더링 자체가 다시 일어나므로 전환 비용이 높습니다.

v-if와 v-for은 함께 사용되는 것이 권장되지 않습니다.

함께 사용하면 v-if가 더 높은 우선순위를 가져 원하는 동작이 일어나지 않을 수 있습니다.

• 올바르지 않은 사용법

<ul>
  <li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
  </li>
</ul>

• 올바른 사용법

<ul>
  <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
</ul>

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">{{ user.name }}</li>
  </template>
</ul>

[1-2] v-show

v-show 디렉티브는 요소의 스타일 속성 display를 조절합니다.

<h1 v-show="isShow">Hello Vue</h1>

요소가 아예 화면에서 사라지는 것이 아닌, 요소의 display 속성 값을 none으로 변경합니다.

[*] 특징

데이터가 false인 경우에도 렌더링은 되 있는 상태이므로 초기 렌더링 비용은 높습니다.

하지만 스타일 속성의 값으로 보여지는 여부가 정해지기 때문에 전환 비용은 낮습니다.

v-show의 경우, 요소를 구조적으로 생성한 후 데이터를 입히기 때문에

이중 중괄호 화면의 텍스트가 그대로 출력되는 경우가 있을 수 있습니다.

따라서 v-cloak 디렉티브와 같이 사용하는 것이 좋습니다.

<h1 v-show="isShow" v-cloak>{{ msg }}</h1>
<!-- isShow, msg의 사용할 준비가 모두 끝난 후에 v-cloak는 사라집니다. -->

[v-cloak] {
  display: none;
}

• v-cloak

컴포넌트의 데이터가 요소에 연결이 되어 있고, 해당 데이터를 사용할 준비가 모두 되었으면

자동으로 제거되는 디렉티브입니다.

따라서 연결된 컴포넌트 데이터들이 컴파일을 완료할 때 까지 엘리먼트에 남아있습니다.

토글되는 비중이 높으면 v-show를, 토글되는 비중이 낮으면 v-if를 사용합니다.

[2] 리스트 렌더링

[2-1] 배열 순회

v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링할 수 있습니다.

item on items 형태의 문법을 필요로 합니다.

이때, item 이외의 index를 필요로 한다면 (item, index) on items 형태로 적을 수 있습니다.

또한 JS의 이터레이터 구문과 동일하게 item of items의 형태로도 적을 수 있습니다.

[2-2] 객체 순회

객체의 순회도 가능합니다.

이때 value, key에 대한 조회를 가능케 하기 위해 (value, key) in myObject의 형태를 지원합니다.

key, value 이외의 index를 필요로 한다면 (value, key, index) in myObject의 형태로 적을 수 있습니다.

[2-3] 상태 유지

v-for을 이용해서 렌더링된 엘리먼트 목록을 갱신할 때, 기본적으로 Vue는 나름의 최적화 과정을 거칩니다. (in-place patch)

항목의 순서가 변경된 경우, 항목의 순서와 일치하도록 DOM 요소 자체를 이동하는 것이 아닌,

Vue는 해당 항목들을 적절한 위치에 패치하고 해당 인덱스에서 렌더링할 내용을 반영하는지 확인합니다.

이 과정에서 약간의 문제가 생길 수 있습니다.

따라서 각 아이템에 유일한 key 속성을 두어 Vue의 최적화 과정에 도움을 줄 수 있습니다.

<div v-for="item in items" :key="item.id">...</div>

[2-4] 배열 변이 메소드

Vue는 배열의 변이 메소드로 인한 변경을 래핑하여 뷰를 갱신할 수 있습니다.

[1] 변이 메소드

변이 메소드는 호출된 원래 배열을 변경합니다.

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

[2] 배열 교체 메소드 (비 변이 메소드)

교체 메소드는 새로운 배열을 반환합니다.

• filter()
• concat()
• slice()

해당 메소드들로 필터링되거나 정렬된 배열을 표시하기 위해 computed 속성을 이용합니다.

computed 속성을 이용하지 못할 상황에서는 methods에 함수를 정의해서 사용할 수 있습니다.

[2-5] 범위 순회

일반적인 for문처럼 v-for도 정수를 사용하여 범위를 순회할 수 있습니다.

<p v-for="n in 10">{{ n }}</p>
<!-- 이 경우 1부터 10까지 출력됩니다. -->

[3] 이벤트 핸들링

v-on(약어: @) 디렉티브로 이벤트를 감지하다가 트리거시킬 수 있습니다.

[3-1] 인라인 메소드 핸들러

때로 인라인 명령문 헨들러에서 원본 DOM 이벤트에 접근해야 하는 일이 발생합니다.

이때 $event를 사용할 수 있습니다.

<button @click="warn('Warnning', $event)">Submit</button>

// ...

methods: {
  warn(msg, event) { // $event는 이벤트 객체입니다!
    if (event) {
      event.preventDefault()
    }
    alert(msg)
  }
}

[3-2] 복합 이벤트 핸들러

여러개의 함수를 실행시키고 싶을 때, 아래의 방법을 사용할 수 있습니다.

<h1 @click="a(); b(); c()">Hello Vue</h1>
<!-- Vue2 -->
<h1 @click="a(), b(), c()">Hello Vue</h1>
<!-- Vue3 -->

[3-3] 이벤트 수식어

<!-- 클릭 이벤트 전파 중단 -->
<a @click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수정자는 체이닝이 가능합니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>

<!-- 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.-->
<!--즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div @click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.-->
<!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
<div @click.self="doThat">...</div>

[1] prevent

해당 JavaScript 코드를 짧게 prevent 수식어 하나로 대체할 수 있습니다.

window.addEventListener("load", () => {
  const aEL = document.querySelector("a");
  aEL.addEventListener("click", (e) => {
    e.preventDefault();
  });
});

<a href="https://google.com" target="_blank" @click.prevent>Google</a>

만약 @이벤트.prevent=”메소드 이름”을 입력하면, 기본 동작이 제어되고 해당 메소드가 실행됩니다.

[2] stop

stop 수식어로 이벤트 버블링을 방지할 수 있습니다.

<div id="app">
  <div class="parent" @click="log">
    <div class="child" @click.stop="log"></div>
    <!-- 상위 요소로의 이벤트 버블링을 방지합니다. -->
  </div>
</div>

[3] capture

이벤트 캡쳐링을 capture 수식어를 통해 구현할 수 있습니다.

window.addEventListener(
  "click",
  () => {
    console.log("window");
  },
  { capture: true }
);

<div class="parent" @click.capture="log">
  <!-- 이벤트 캡쳐 -->
  <div class="child" @click.stop="log"></div>
</div>

[4] self

이벤트 발생 시, 이벤트 객체의 currentTarget과 target은 다른 의미를 가집니다.

target은 현재 클릭한 부분을 말하며 currentTarget은 이벤트가 연결이 되어있는 부분을 말합니다.

self 수식어는 currentTarget과 target이 같은 요소일때만 이벤트를 발생시킵니다.

<div class="parent" @click.self="log">
  <div class="child"></div>
</div>

[5] passive

passive 수식어는 화면의 움직임과 메소드 내부의 처리를 분리시킵니다.

window.addEventListener(
  "click",
  () => {
    console.log("window");
  },
  { passive: true }
);

<div class="parent" @wheel.passive="log">
  <div v-for="n in 15" class="child">{{ n }}</div>
</div>

[3-4] 키 수식어

키보드 이벤트에서 키 코드를 확인해야 할 때, 키 수식어를 사용할 수 있습니다.

키보드에서 제공하는 키의 이름을 케밥 케이스로 변환하여 수식어로 사용할 수 있습니다.

<input @keyup.page-down="onPageDown" /> <input @keyup.arrow-down="log" />

키 수식어는 체이닝 형태로 작성할 수 있습니다.

<input @keyup.alt.enter="clear" />
<!-- 알트와 엔터를 동시에 클릭 시 이벤트 -->

기본적으로 키보드 이벤트는 동시에 누른 키들 중에 해당 키가 포함되어 있는지의 여부만 체크합니다.

해당 키만 눌렸는지 체크하기 위해서는 exact를 사용할 수 있습니다.

<input @keyup.arrow-down.exact="log" />
<!-- 키보드 아래 키만 눌렀을 때 이벤트가 동작합니다. -->

[4] 폼 입력 바인딩

v-model 디렉티브를 사용해서 양방향 데이터 바인딩을 생성할 수 있습니다.

• 단방향 데이터 바인딩: 데이터가 한쪽으로 전달
• 양방향 데이터 바인딩: 데이터가 양방향으로 상호작용

단 v-model은 한글에 대해서는 약간 다르게 동작합니다.

한 글자가 완성이 되어야만 반영이 되는 것을 확인할 수 있습니다.

이럴땐, :value와 @input 속성을 사용하여 작성을 할 수 있습니다.

<input :value="msg" @input="msg = $event.target.value" />

[4-1] 수식어

[1] lazy

v-model은 각 이벤트 후 입력과 데이터를 동기화합니다.

lazy 수식어를 추가하여 change 이벤트 이후에 동기화가 되도록 설정할 수 있습니다.

<input v-model.lazy="msg" />

[2] number

사용자 입력을 자동으로 숫자로 형변환시킬 수 있습니다.

<input v-model.number="msg" />

[3] trim

사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거해줍니다.

<input v-model.trim="msg" />

---

출처

프로그래머스

Vue.js3 Document