[DAY-38] Vue (5)

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

오늘의 소감은?
Vue의 컴포넌트 구조, 데이터 방향 등을 파악할 수 있었습니다.
하지만 아직 멀었어요..
과제 어떡하지... 어떡하지....

[1] 컴포넌트 등록

컴포넌트는 전역, 지역 등록이 가능합니다.

등록을 위해서는 컴포넌트의 이름을 반드시 지정해야 합니다.

해당 컴포넌트는 파스칼 케이스, 케밥 케이스로 작성할 수 있습니다.

[1-1] 전역, 지역 등록

전역 등록은 자주 사용되거나 언제든지 사용할 컴포넌트들만 등록합니다.

import { createApp } from "vue";
import App from "./App.vue";
import Btn from "./components/Btn";

const app = createApp(App);
app.component("Btn", Btn); // 전역 등록
app.mount("#app");

따라서 대부분의 컴포넌트는 지역 등록을 통해 사용합니다.

import Hello from "~/components/Hello";
import Btn from "~/components/Btn";

export default {
  components: {
    Hello,
    Btn, // 지역 등록
  },
// ...

[2] 컴포넌트 Props

props는 데이터 타입을 명시해줄 수 있습니다.

참고로 JavaScript에서 작성한 props 명이 카멜 케이스여도, html상에서는 케밥 케이스로 작성해야 인식됩니다.

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // 또는 다른 생성자
}

:(v-bind 디렉티브)를 사용하여 동적인 데이터를 전달할 수 있습니다.

<!-- 변수의 값을 동적으로 할당 -->
<blog-post :title="post.title"></blog-post>

<!-- 복잡한 표현을 포함한 동적 값 할당 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

또한 초기값을 지정해줄 수 있습니다.

<Hello :message="msg" name="Hello!" />

export default {
  props: {
    message: String, // 이때 { type: String, default: 초기값 }을 지정해줄 수 있습니다.
    name: String,
  },
// ...

[2-1] Props 유효성 검사

app.component("my-component", {
  props: {
    // 기본 타입 체크 (`null`과 `undefined`는 모든 타입 유효성 검사를 통과합니다.)
    propA: Number,
    // 여러 타입 허용
    propB: [String, Number],
    // 문자열 필수
    propC: {
      type: String,
      required: true,
    },
    // 기본 값을 갖는 숫자형
    propD: {
      type: Number,
      default: 100,
    },
    // 기본 값을 갖는 객체 타입
    propE: {
      type: Object,
      // 객체나 배열의 기본 값은 항상 팩토리 함수로부터 반환되어야 합니다.
      default: function () {
        return { message: "hello" };
      },
    },
    // 커스텀 유효성 검사 함수
    propF: {
      validator: function (value) {
        // 값이 꼭 아래 세 문자열 중 하나와 일치해야 합니다.
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      },
    },
    // 기본 값을 갖는 함수
    propG: {
      type: Function,
      // 객체나 배열과 달리 아래 표현은 팩토리 함수가 아닙니다. 기본 값으로 사용되는 함수입니다.
      default: function () {
        return "Default function";
      },
    },
  },
});

[3] 컴포넌트 Non-Prop 속성

$attrs 프로퍼티를 통해 props가 아닌 Non-Prop 속성들에 접근할 수 있습니다.

<!-- App.vue(상위 컴포넌트)  -->
<Hello class="hello" style="font-size: 100px" @click="msg += '!'" />

<!-- Hello.vue(하위 컴포넌트)  -->
<h1 v-bind="$attrs">Hello</h1>

Non-Prop 속성들이 자동으로 루트 요소에 상속되는 것을 원치 않을 땐, inheritAttrs 속성을 사용할 수 있습니다.

export default {
  inheritAttrs: false, // false로 설정하면 상속이 일어나지 않습니다.
  props: {
    style: Object,
  },
  mounted() {
    console.log(this.$attrs);
  },
};

[4] 컴포넌트 커스텀 이벤트

@ 디렉티브와 emit을 사용해서 커스텀 이벤트를 정의하고 사용할 수 있습니다.

<!-- App.vue(상위 컴포넌트) -->
<template>
  <h1>{{ msg }}</h1>
  <Hello @add="msg += '?!'" />
</template>

<!-- Hello.vue(하위 컴포넌트) -->

<template>
  <h1 @click="$emit('add')">Hello</h1>
</template>

<script>
  export default {
    emits: ["add"],
  };
</script>

다만 네이티브 이벤트를 주의해야 합니다.

click이라는 자바스크립트 네이티브 이벤트를 커스텀 이벤트로 선언할 수 있습니다.

export default {
  emits: ["click"],
};

이렇게 되면 자바스크립트에 내장된 클릭 이벤트는 동작하지 않습니다.

[5] 컴포넌트 Slots

slot 태그를 사용하여 상위 컴포넌트에서 선언한 하위 컴포넌트 사이의 Content를 렌더링할 수 있습니다.

<!-- App.vue(상위 컴포넌트) -->
<template>
  <h1>{{ msg }}</h1>
  <Hello>Hello Compnent</Hello>
  <!-- 해당 내용이 하위 컴포넌트 slot에 들어갑니다. -->
</template>

<!-- Hello.vue(하위 컴포넌트) -->
<template>
  <h1>Hello!</h1>
  <slot></slot>
</template>

[5-1] Fallback Content

해당 slot 태그 내부에 Fallback Content를 작성할 수 있습니다.

상위 컴포넌트의 하위 컴포넌트 태그 내부에 content가 없을 경우에 작성되는 content를 Fallback content라 합니다.

<!-- App.vue(상위 컴포넌트) -->
<template>
  <h1>{{ msg }}</h1>
  <Hello>Hello Compnent</Hello>
  <Btn></Btn>
</template>

<!-- Btn.vue(하위 컴포넌트) -->
<template>
  <button>
    <slot>Click me!</slot>
    <!-- 상위 컴포넌트의 content가 없으므로 해당 content가 보여집니다. -->
  </button>
</template>

[5-2] v-slot

v-slot 디렉티브를 이용하여 원하는 슬롯에 해당 템플릿 내용을 추가할 수 있습니다.

v-slot 디렉티브는 #의 약어를 사용할 수 있습니다.

<!-- App.vue(상위 컴포넌트) -->
<template>
  <h1>{{ msg }}</h1>
  <Hello>Hello Compnent</Hello>
  <Btn>
    <template v-slot:buttonSlot>
      <h2>ABC</h2>
    </template>
  </Btn>
</template>

<!-- Btn.vue(하위 컴포넌트) -->
<template>
  <button>
    <slot name="buttonSlot">Click me!</slot>
  </button>
</template>

이때의 slot 종류는 두 가지로 나뉘어집니다.

[1] name slot

이렇게 name 속성을 가진 slot을 name을 가지는 slot이라고 합니다.

<slot name="buttonSlot">Click me!</slot>

상위 컴포넌트에서 v-slot 디렉티브로 직접 접근이 가능합니다.

<Btn>
  <template v-slot:buttonSlot>
    <h2>ABC</h2>
  </template>
</Btn>

[2] 범위를 가지는 슬롯

slot은 범위를 가질 수 있습니다.

범위는 해당 슬롯이 사용되는 구간을 뜻합니다.

<slot :hello="123"></slot>
<!-- 
	이렇게 name을 지정해주지 않으면 #default로 접근할 수 있으며
	default 슬롯이라 합니다. 
-->

동일하게 v-slot 디렉티브로 해당 슬롯 내부의 범위에 접근할 수 있습니다.

<Hello>
  <template #default="{ hello }">
    <!-- 해당 hello 데이터에 접근할 수 있습니다. -->
    <h2>{{ hello }}</h2>
  </template>
</Hello>

해당 name 속성과 데이터는 동적으로 제어할 수 있습니다.

[6] 동적 컴포넌트

필요에 따라 특정 컴포넌트를 교체해줄 수 있는 동적 컴포넌트의 개념을 사용할 수 있습니다.

<component :is="currendComponent"></component>
<!-- 
	교체될 수 있는 모든 컴포넌트들을 is 속성에 지정합니다
	보통 여러개의 컴포넌트가 교제되므로, data를 넣어줍니다. 
-->

동적 컴포넌트는 자주 전환될 때는 사용하지 않는 것이 좋습니다.

전환 비용이 높기 때문입니다.

이때 keep-alive 태그를 사용하여 캐싱 기능을 사용할 수 있습니다.

<template>
  <h1 @click="currentComponent = 'World'">{{ msg }}</h1>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

높은 전환 비용을 캐싱 기능을 사용하여 해결해줄 수 있기 때문에

동적 컴포넌트 개념을 사용할 땐, 해당 keep-alive 태그로 묶어주는 것이 권장됩니다.

[7] Refs

보통 어떠한 html 특정 엘리먼트를 찾기 위해 querySeletor을 사용합니다.

하지만 querySeletor은 해당 컴포넌트의 전체 document를 스캔하여 원하는 요소를 찾아옵니다.

따라서 효율성을 위해 ref 속성을 사용할 수 있습니다.

ref 속성은 reference의 줄임말이자 html 특정 엘리먼트를 참조할 수 있는 속성입니다.

<h1 ref="hello">Hello</h1>
<!-- 컴포넌트의 ref 속성에 부여된 이름으로 접근합니다. -->

const $h1El = this.$refs.hello; // 참조해서 사용할 수 있습니다.
console.log($h1El);

해당 ref 속성은 html 요소가 연결된 이후부터 사용할 수 있습니다. (mount)

특정 component 태그에 직접 적용도 가능합니다.

다만 component 내부 요소에 직접 접근하기 위해서는 $el을 추가해야 합니다.

const $componentEl = this.$refs.hello.$el;

이외에도 다양한 component에 내장된 속성에 접근할 수 있습니다.

따라서 ref로 접근한 html 요소의 속성 또한 접근해서 저장할 수 있습니다.
$refs는 중첩이 가능합니다.

[+] $nextTick

보통 데이터가 변경된 이후에는 바로 요소가 렌더링되지 않습니다.

데이터가 변경되는 함수 안의 로직이 어느정도 완료된 후, 렌더링 작업이 일어납니다.

따라서 데이터가 변경된 이후에 특정 요소에 접근해서 렌더링 속성을 조작해도

해당 조작이 정상적으로 동작하지 않을 때가 많습니다.

이때, 데이터의 변경이 완료되고 렌더링(DOM 업데이트)을 처리해주는 $nextTick을 사용할 수 있습니다.

onEdit() {
	this.data = true;
	this.$nextTick(() => {
		this.$refs.editor.focus()
	});
}

$refs와 $nextTick은 대부분 같이 사용됩니다.

---

출처

프로그래머스

Vue.js3 Document