[데브코스] TIL-123 Vue, Slots, 동적컴포넌트, Ref, 플러그인, 믹스인

컴포넌트 Slots

  slot이라는 태그를 사용하여 상위 컴포넌트에 작성한 하위 컴포넌트가 slot 부분에 들어가서 화면이 그려진다. slot 태그에 name을 지정할 수 있고, 이를 v-slot으로 받을 수 있다. v-slot 디렉티브는 #이라는 약어로 사용할 수 있다.

 

상위 컴포넌트

<Hello>
    <template #abc> <!-- <template v-slot:abc> -->
        <h1>abc</h1>
    </template>
</Hello>

하위 컴포넌트 Hello

<template>
    <h1>Hi</hi>
    <slot name="abc"></slot>
</template>

---

동적 컴포넌트

  동적으로 컴포넌트를 바꿔줄 수 있는 기능이다. component 태그에 is라는 속성을 사용하여 동적으로 바뀔 컴포넌트 이름을 작성해준다. 여기서 컴포넌트 이름은 스크립트 안에 지정된 이름이나 전역 컴포넌트 이름만 사용 가능하다.

<template>
	<component :is="currentComponent"/>	
</template>

<script>
    export default {
        components: {
            Hello
        },
        data() {
            return {
                currentComponent: 'Hello'
            }
        }
    }
</script>

위와 같은 방식으로 currentComponent의 값을 변경 시켜주어 동적으로 컴포넌트를 바꾸면 컴포넌트가 unmounted 되고 다시 created 되는 것이 반복된다. 즉, 전환 비용이 크다. 만약 전환이 자주 일어나야 한다면 한 번 생성된 컴포넌트를 캐싱해서 사용하는 방법도 존재한다. component 부분을 keep-alive 태그로 감싸주면 된다.

<template>
    <keep-alive>
        <component :is="currentComponent"/>
    </keep-alive>
</template>

---

Refs

  참조하고 싶은 요소를 ref라는 속성을 주어 $refs라는 객체 내에서 찾아 사용할 수 있다. 이는 mounted 라이프 사이클에서 사용할 수 있다.

<template>
	<h1 ref='alpha'>abc</h1>	
</template>

<script>
    export default {
        mounted() {
            console.log(this.$refs.alpha)
        }
    }
</script>

---

플러그인

1. 플러그인 정의하고 사용해보기

바닐라 js에서 api.js 모듈화해서 사용한 것 같은 느낌…. 감이 아직 완벽히 오지는 않음

export default {
    install(app, options) {
        app.config.globalProperties.$fetch = (url, opts) => {
            return fetch(url, opts).then(res => res.json())
        }
    }
}

import { createApp } from 'vue'
import App from './App.vue'
import fetchPlugin from '~/plugins/fetch'

const app = createApp(App)
app.use(fetchPlugin)
app.mount('#app')

created() {
    this.init()
},
methods: {
    async init() {
        await this.$fetch('https://~').then(res => console.log(res))
    }
}

---

믹스인

  믹스인은 Vue 컴포넌트에 재사용 가능한 기능을 배포한다. 믹스인과 컴포넌트가 중복되는 옵션을 가지고 있다면 컴포넌트가 우선되어 적절히 병합된다. 같은 이름의 훅 함수는 모두 호출될 수 있게 배열로 병합된다. 객체도 병합되나, 충돌하는 키가 있는 경우에는 컴포넌트가 우선된다.

 

mixins: [믹스인이름] 이렇게 가져와서 사용할 수 있다.

1. 전역 믹스인

Vue 애플리케이션에 믹스인을 전역으로 적용할 수 있다.

 

오늘을 마무리 하며

 

  드디어 Vue 강의가 종료되었다. 일주일 정도 공부를 했는데, 솔직히 너무 짧은 기간안에 많은 양을 집어 넣으려 하니 뒤로 갈수록 쳐지기만 한 것 같다... 한 번에 모든 개념을 이해하고 활용하고 싶다는 욕심이 앞선 것 같기도 하다. 그래서 마음 고쳐 잡고 프레임워크란 무엇인지 또 이를 어떤 개념들이 존재하는지 이해하는데 초점을 맞추기로 마음 먹었다. 솔직하게 아직까지도 제대로 이해하지 못한 개념들이 한 트럭이 넘는것 같다... 이제야 코드 작성하는것에 익숙해졌다고 생각했는데 또 다시,,, 혼란에 빠진 기분이다. 공식 문서가 있음에도 불구하고 강의 내용들을 나만의 문장으로 정리한 이유는 복습도 하면서 이해도 하면서 공식문서와 함께 참고하려고 한건데, 지금은 그냥 강의 내용 따라 쳐놓은것 같은 기분이다.. 아무래도 오늘은 일찍 자야겠다..