๐ท๏ธVue ref๋?
Vue์์ ํน์ ์ปดํฌ๋ํธ๋ HTML์ ์ ๊ทผ์ ํ๊ณ ์ถ์ ๋๋ ref์์ฑ์ ์ด์ฉํด์ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
๋จผ์ ์๋์ ์ฝ๋๋ก ์์๋ฅผ ๋ณด์.
/page/ref.vue
<template>
<div>
<h1>์์์ปดํฌ๋ํธ ์
๋๋ค.</h1>
<button @click="componentClick">ํ์ ์ปดํฌ๋ํธ ํด๋ฆญ ์ด๋ฒคํธ ํธ์ถ</button>
<refComponent ref="refComponent" style="margin:30px 0 0 0;"/>
</div>
</template>
<script>
import refComponent from '~/components/refComponent.vue';
export default {
components: {
refComponent
},
data() {
return {}
},
methods: {
componentClick: function () {
this.$refs.refComponent.clickCount();
}
}
}
</script>
/components/refComponent.vue
<template>
<div>
<h3>ํ์ ์ปดํฌ๋ํธ ์
๋๋ค.</h3>
<h5>์์์ปดํฌ๋ํธ ํด๋ฆญ Count : {{count}}</h5>
</div>
</template>
<script>
export default {
data() {
return{
count:0
}
},
methods: {
clickCount: function() {
this.count = this.count + 1;
}
}
}
</script>
ref.vue์์ refComponent์ ์ ๊ทผํด์ ํ์ ์ปดํฌ๋ํธ์ function์ ์คํํ๋ ์ฝ๋์ด๋ค.
์ด๋ด ๊ฒฝ์ฐ ํ์ ์ปดํฌ๋ํธ์ ref๋ฅผ ์ด์ฉํด์ ์ปดํฌ๋ํธ ๋ช ์ ์ ๊ทผํ๋ค
๊ทธ๋ค์ ํด๋น ์ปดํฌ๋ํธ์ methods์ ๋ฑ๋ก๋ clickCount๋ฅผ ํธ์ถํด์ ์ซ์๋ฅผ ์ฌ๋ฆฌ๋ ์ฝ๋์ด๋ค.
์ด๋ ๋ฏ ref๋ฅผ ์ด์ฉํ๋ฉด ํด๋น ์ปดํฌ๋ํธ์ ์์ฝ๊ฒ ์ ๊ทผํ ์ ์๋ค.
๐ฉref ์ฌ์ฉ ์ ์ฃผ์ ์ฌํญ
ref๋ก ํ์ ์ปดํฌ๋ํธ๋ก ์ ๊ทผํ๋ ค๋ฉด ์๋ ์ฝ๋๋ก ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
this.$refs.์ปดํฌ๋ํธ์ด๋ฆ
ํ์ง๋ง, ์ด๋ ํ์ธํด์ผ ํ๋ ์ ์
refs ์์ฑ์ ์ ๊ทผํ๋ ค๋ฉด ํด๋น ์ปดํฌ๋ํธ๊ฐ ๋๋๋ง(rendering)์ด ์๋ฃ๋ ํ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
์ด๋ฌํ ์์ฑ ๋๋ฌธ์ created ์ฃผ๊ธฐ์์๋ this.$refs๊ฐ undefined๊ฐ ๋จ๋ฉฐ
mounted ์ฃผ๊ธฐ์ ๋ค์ด์์ผ ref๋ก ๋๋๋ง์ด ๋์ด์ผ ์ ๊ทผ์ด ๊ฐ๋ฅํ ๊ฒ์ ์ ์ ์๋ค.
/page/ref.vue
<template>
<div>
<h1>์์์ปดํฌ๋ํธ ์
๋๋ค.</h1>
<button @click="componentClick">ํ์ ์ปดํฌ๋ํธ ํด๋ฆญ ์ด๋ฒคํธ ํธ์ถ</button>
<refComponent ref="refComponent" style="margin:30px 0 0 0;"/>
</div>
</template>
<script>
import refComponent from '~/components/refComponent.vue';
export default {
components: {
refComponent
},
data() {
return {}
},
created() {
console.log('created');
console.log(this.$refs.refComponent);
},
mounted() {
console.log('mounted');
console.log(this.$refs.refComponent);
},
methods: {
componentClick: function () {
this.$refs.refComponent.clickCount();
}
}
}
</script>
๐คv-if์์ ref ์ฌ์ฉ ์ค๋ฅ
๋๋๋ง(rendering) ์ด ๋์ด์ผ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค๋ ํน์ง ๋๋ฌธ์
v-if ์กฐ๊ฑด์ด ์ ์ฉ๋์ง ์์ ๋ ref์ ์ ๊ทผํ๋ ์ฝ๋๋ฅผ ์ฐ๋ฉด ๋ค์ undefined๊ฐ ๋ ์
์ด๋๋ v-show๋ก ์ฝ๋๋ฅผ ๋ฐ๊ฟ์ ref์ ์ ๊ทผ์ ํ๋ฉด ๋๋ค.
์ค๋ ๋์ ๊ฒฝ์ฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ฒด์ ์ผ๋ก
v-if๋ก ์ฝ๋ฉ์ด ๋์ด์์ด์๋ด๊ฐ ๋ณ๊ฒฝ์ด ๋ถ๊ฐ๋ฅํ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ๋ค.๐
๐ this.$nextTick() ์ด์ฉํ๊ธฐ
์ด๋ ๋ฏ ๋น๋๊ธฐ๋ก ์ฒ๋ฆฌ๋๋ ๊ณผ์ ์ค์์ Data ์ ๋ฐ์ดํธ ์ง ํ์
DOM์ด ๋ณ๊ฒฝ๋๊ธฐ๋ ์ ์ DOM์ ์ ๊ทผํ๋ ค๊ณ ํ๋ฉด ์ฐพ์ง ๋ชปํ๋ undefined ์ด์๊ฐ ๋ฐ์ํ๋ค.
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋์จ ๊ฒ this.$nextTick์ด๋ค
$nextTick ์ฝ๋ฐฑ ํจ์๋ฅผ ์ด์ฉํ๋ฉด
๋ฐ์ดํฐ๊ฐ ๋ชจ๋ ๊ฐฑ์ ๋ ๋ค์์ ๊ทธ๋ค์ ํจ์๋ฅผ ์ํํ๋ค.
<template>
<div>
<h1>์์์ปดํฌ๋ํธ ์
๋๋ค.</h1>
<button @click="componentClick">ํ์ ์ปดํฌ๋ํธ ํด๋ฆญ ์ด๋ฒคํธ ํธ์ถ</button>
<refComponent ref="refComponent" style="margin:30px 0 0 0;"/>
</div>
</template>
<script>
import refComponent from '~/components/refComponent.vue';
export default {
components: {
refComponent
},
data() {
return {}
},
async created() {
console.log('created');
await this.$nextTick();
console.log(this.$refs.refComponent);
},
mounted() {
console.log('mounted');
console.log(this.$refs.refComponent);
},
methods: {
componentClick: function () {
this.$refs.refComponent.clickCount();
}
}
}
</script>
๊ธฐ์กด ์ฝ๋์์ created์์ async๋ฅผ ๋ฃ์ด์ฃผ๊ณ
await this$nextTick(); ๋ค์์ ref๋ฅผ ํธ์ถํ๋ค.
์ด๋ฐ ์์ผ๋ก ํธ์ถํ์ ๊ฒฝ์ฐ console์์ ์ ํํ ref ์ปดํฌ๋ํธ๋ฅผ ์ ํํ ์ฐพ๋ ๊ฒ์ ํ์ธํ๋ค.๐ค