728x90
๋ฐ์ํ
๐ก ์ค์ต ํฌ์ธํธ!
๐ ๊ณผ์ 1. ๋ฉ์ธ ํ์ด์ง ์ ์ํ๋ฉด ๋งค 1์ด๋ง๋ค ํ ์ธ ๋ฐฐ๋์ ํผ์ผํธ๋ฅผ 1%์ฉ ๊ฐ์์ํค๊ธฐ
- 30์ด๊น์ง ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ GIF ๋ก ์บก์ฒํ๊ธฐ์ ๋ฌด๋ฆฌ๊ฐ ์์ด์ 5์ด๋ง ์นด์ดํธํ๋ ๊ฑธ๋ก ์์ ํ๋ค.
๐ ๊ณผ์ 2. ๋ชจ๋ฌ์ฐฝ์ input ์ 2๋ฅผ ๊ธฐ์ ํ๋ฉด ์๋ฆผ์ฐฝ ๋์ฐ๊ณ ๊ฐ์ ๋ก input ๊ณต๋ ๋ง๋ค๊ธฐ
- 1์ ์ ๋ ฅํ์ ๋๋ ์ ์์ ์ผ๋ก ์ด ๊ธ์ก๊ณผ ํจ๊ป ์ถ๋ ฅ๋์ง๋ง, 2๋ฅผ ์ ๋ ฅํ๋ฉด input ์ฐฝ์ ๊ณต๋์ผ๋ก ๋์ค๊ณ , ์๋ฆผ์ฐฝ์ด ๋จ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
๐ Vue ์ ๋ผ์ดํ์ฌ์ดํด ์์๋ณด๊ธฐ
- Vue ๊ณต์๋ฌธ์๋ฅผ ์ดํด๋ณด๋ฉด, ์์ ๊ฐ์ด Component ์ ์์ฑ, ์๋ฉธ ํน์ ์ ๋ฐ์ดํธ๋๋ ๊ณผ์ ์ step ๋ณ๋ก ๊ทธ๋ ค์ Lifecycle ์ ์ค๋ช ํ๋ ๋ถ๋ถ์ด ์๋ค.
- ๊ทธ๋ฆฌ๊ณ , ์์ ๊ณผ์ ์ ์ดํดํ๋ฉด ์ด์ Lifecycle hook ์ด๋ผ๋ ๊ฒ์ ์ฌ์ฉํ ์ ์๋ค.
- ๋จผ์ Component ๋ create -> mount ์ ๋จ๊ณ๋ฅผ ๊ฑฐ์ณ์ ์์ฑ์ด ๋๋ค.
(create ๋ Component ๋ฐ์ดํฐ๋ฅผ ์์ฑํ๋ ๊ฒ, mount ๋ index.html ํ์ผ์ Component ๋ฅผ ์ฅ์ฐฉํ๋ ๊ฒ์ผ๋ก ์๊ฐํ๋ฉด ๋๋ค.) - ๋ฐ์ดํฐ๊ฐ ๋ฐ๋์ด์ Component ๊ฐ ์ฌ๋ ๋๋ง๋ ๋์๋ update ์ ๋จ๊ณ๋ฅผ ๊ฑฐ์น๋ค.
- ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋์ ํ๋ ๋ฑ์ ์ํฉ์ด ๋ฐ์ํ์ฌ Component ๊ฐ ์ญ์ ๋๋ฉด unmount ๋ผ๋ ๋จ๊ณ๋ฅผ ๊ฑฐ์น๋ค.
beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()
- create, mount, update, unmount ๋ฑ์ ๋จ๊ณ๋ค ์ค๊ฐ์ค๊ฐ์ ์ฝ๋๋ฅผ ์คํ์ํค๊ณ ์ถ์ ๋๊ฐ ์๋๋ฐ, ๊ทธ ๋ ์์ ๊ฐ์ Lifecycle hook ์ ์ํฉ์ ๋ง๊ฒ ๊ณจ๋ผ์ ์ฌ์ฉํ๋ฉด ๋๋ค.
data(){
return {
}
},
mounted(){
// ์ฌ๊ธฐ์ mount ๋์์ ๋ ์คํํ ์ฝ๋ ์์ฑ!
}
- Lifecycle hook ์ <script></script> ์์ data ์ ๋๋ํ ์์ฑํ์ฌ ์ฌ์ฉํ๋ฉด ๋๋ค.
- ํนํ, ์๋ฒ๊ฐ ์๋ ๊ฒฝ์ฐ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ, ์ด ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์ฝ๋๋ ์ผ๋ฐ์ ์ผ๋ก mounted() ํน์ created() ์ ์์ฑํ๋ค.
๐ ๊ณผ์ 1. ๋ฉ์ธ ํ์ด์ง ์ ์ํ๋ฉด ๋งค 1์ด๋ง๋ค ํ ์ธ ๋ฐฐ๋์ ํผ์ผํธ๋ฅผ 1%์ฉ ๊ฐ์์ํค๊ธฐ
๐ค ๊ณผ์ ํ์ธํ๊ธฐ
- ํ ์ธ ๋ฐฐ๋์๋ ํ์ฌ ๊ธฐ๋ณธ์ ์ผ๋ก "์ง๊ธ ๊ฒฐ์ ํ๋ฉด 30% ํ ์ธ" ์ด๋ผ๊ณ ์ ํ ์๋ค.
- ์ ํ ์ธ ๋ฐฐ๋ ๋ฌธ๊ตฌ๋ ๋ฉ์ธ ํ์ด์ง์ ์ ์ํ ํ 1์ด๊ฐ ์ง๋ ๋๋ง๋ค 1%์ฉ ๊ฐ์ํด์ผ ํ๋ค.
- ํผ์ผํธ ๋ถ๋ถ์ ์ซ์๊ฐ 0 ๋ฐ์ผ๋ก ๋จ์ด์ง๋ฉด ์๋๋ค. (์ฆ, -1%, -2%.. ์ด๋ฐ ์์ผ๋ก ํ์๋๋ฉด ์๋๋ค๋ ๊ฒ!)
๐ค ๊ณผ์ ์๊ฐํด๋ณด๊ธฐ
- ์ ๊ณผ์ ๋ฅผ ์ํํ๋ฉด์ ํผ์ผํธ๊ฐ 0% ์ธ ์ํฉ์์ ํ ์ธ ๋ฐฐ๋๊ฐ ๋ณด์ด๋ ๊ฒ๋ ์ด์ํ๋ค ์ถ์ด์, ์ถ๊ฐ๋ก 0% ๊ฐ ๋๋ฉด ํ ์ธ ๋ฐฐ๋๋ฅผ ์ ๋ณด์ด๊ฒ ์ฒ๋ฆฌํด์ฃผ์๋ค.
- ํ ์ธ ๋ฐฐ๋๋ฅผ App.vue ์์ ์์ฑํ์ง ์๊ณ Discount.vue ํ์ผ๋ก Component ๋ฅผ ๋ฐ๋ก ๋ง๋ค์ด๋์์ ์กฐ๊ธ ํท๊ฐ๋ ธ์ง๋ง ๊ธ๋ฐฉ ํด๋ผ ์ ์์๋ค.
- ์ผ๋จ ๋ด๊ฐ ์๊ฐํ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
- ํ ์ธ ๋ฐฐ๋์ 30 ์ด๋ผ๋ ์ซ์๋ ๊ณ์ ๋ณ๊ฒฝ๋์ด ์ ์ฅ๋์ด์ผ ํ๋ฏ๋ก data ๋ณด๊ดํจ์ ์ ์ฅ์ด ํ์ํ๋ค.
- App Component ๊ฐ Discount Component ๋ณด๋ค ์์ Component ์ด๋ฏ๋ก mounted() ์ data ๋ App Component ์์ ์ ์ฅ ๋ฐ ์ฌ์ฉํ๋ค.
- ๋ฐ๋ผ์, data ๋ฅผ ํ์ Component ์ธ Discount Component ์์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ App Component ์์ Discount Component ์ props ๋ก ์ ๋ฌํ์ฌ Discount Component ์์ props ๋ก ๋ฐ์ ๋ฑ๋ก ํ ์ฌ์ฉํด์ผ ํ๋ค.
- mounted() ์๋ setInterval() ์ ์ฌ์ฉํ์ฌ ์ซ์๊ฐ 1๋ณด๋ค ํฐ ๊ฒฝ์ฐ์๋ -1 ์ ํด์ฃผ๊ณ , ์ซ์๊ฐ 1 ์ด ๋๋ฉด ํ ์ธ ๋ฐฐ๋๋ฅผ ์๋ณด์ด๊ฒ ํ ํ clearInterval() ์ ํตํด ์ธํฐ๋ฒ ํ์ด๋จธ๋ฅผ ์ญ์ ํด์ฃผ์ด์ผ ํ๋ค.
๐ค ์ฝ๋ ์์ฑํ๊ธฐ
// App.vue ์ ์ฒด ์ฝ๋ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
// ์ ์ฒด ์ฝ๋์ ๋ด์ฉ์ด ๋๋ฌด ๊ธธ์ด ๋ถํ์ํ ๋ถ๋ถ์ ์ ์ธํ๋ค.
<template>
<Discount v-if="showDiscount == true" :decreaseDiscount="decreaseDiscount"/>
</template>
<script>
export default {
name: "App",
data(){
return {
showDiscount : true,
decreaseDiscount : 30,
}
},
mounted(){
setInterval(() => {
if (this.decreaseDiscount > 1){
this.decreaseDiscount--;
} else if (this.decreaseDiscount == 1){
this.showDiscount = false;
clearInterval();
}
}, 1000);
},
};
</script>
- ๋จผ์ <Discount /> ๊ฐ ๋ณด์ด๋์ง์ ์ฌ๋ถ๋ฅผ true / false ๋ก ์ ์ฅํ ์ ์๋๋ก data ๋ณด๊ดํจ์ showDiscount ๋ผ๋ ์ด๋ฆ์ผ๋ก ์ ์ฅํด์ฃผ์๋ค.
- ๊ทธ๋ฆฌ๊ณ <Discount/> ์ v-if ๋ฌธ์ ํตํด showDiscount ๊ฐ true ์ผ ๋๋ง <Discount/> ๋ฅผ ๋ณด์ฌ์ค ์ ์๋๋ก ์ฝ๋๋ฅผ ์์ฑํ์๋ค.
- ๊ทธ ํ mounted() ์ setInterval() ํจ์๋ฅผ ์์ฑํด์ฃผ์๋ค.
(์ฝ๋๋ฅผ ์ด๋ป๊ฒ ์์ฑํ ์ง ์์์ ์ด์ผ๊ธฐํ๊ณ , ๊ทธ๋๋ก ๊ตฌํํ ๊ฒ์ด๋ฏ๋ก ์์ธํ ๋ด์ฉ์ ์๋ตํ๋ค.) - ์ด์ , ๊ณ์ ๋ณ๊ฒฝ๋๋ ํผ์ผํธ๋ฅผ props ๋ก Discount Component ๋ก ์ ๋ฌํ๊ธฐ ์ํด decreaseDiscount ์ 30์ด๋ผ๋ ์ซ์๋ฅผ ์ ์ฅํ ํ :decreaseDiscount="decreaseDiscount" ๋ผ๊ณ ์ฝ๋๋ฅผ ์์ฑํ์ฌ props ๋ก ์ ์กํด์ฃผ์๋ค.
// Discount.vue ์ ์ฒด ์ฝ๋ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
// ์ ์ฒด ์ฝ๋์ ๋ด์ฉ์ด ๋๋ฌด ๊ธธ์ด ๋ถํ์ํ ๋ถ๋ถ์ ์ ์ธํ๋ค.
<template>
<div class="discount">
<p>์ง๊ธ ๊ฒฐ์ ํ๋ฉด {{ decreaseDiscount }}% ํ ์ธ!</p>
</div>
</template>
<script>
export default {
name: 'Discount',
props: {
decreaseDiscount: Number,
},
}
</script>
- props ๋ ๋ฑ๋กํ๊ณ ์ฌ์ฉํด์ผ ํ๋ฏ๋ก, <script></script> ์ decreaseDiscount : Number ๋ผ๊ณ props ๋ก ๋ฐ์์จ ๋ฐ์ดํฐ ์ด๋ฆ๊ณผ ๋ฐ์ดํฐ ํ์ ์ ์์ฑํด์ฃผ์๋ค.
- ์ด์ ํด๋น ๋ฐ์ดํฐ๋ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ฏ๋ก, ํ ์ธ ๋ฐฐ๋์ ๋ฌธ๊ตฌ ์ค ๊ฐ์ด ๊ณ์ ๋ณํ๋ ๋ถ๋ถ์ {{ decreaseDiscount }} ๋ผ๊ณ ๋ฐ์ดํฐ๋ฐ์ธ๋ฉ์ ํด์ฃผ์๋ค.
๐ ๊ณผ์ 2. ๋ชจ๋ฌ์ฐฝ์ input ์ 2๋ฅผ ๊ธฐ์ ํ๋ฉด ์๋ฆผ์ฐฝ ๋์ฐ๊ณ ๊ฐ์ ๋ก input ๊ณต๋ ๋ง๋ค๊ธฐ
๐ค ๊ณผ์ ํ์ธํ๊ธฐ
- ๋ชจ๋ฌ์ฐฝ ์์ input ์ด ์๋๋ฐ ์ฌ๊ธฐ์ 2๋ฅผ ๊ธฐ์ ํ์ ๋ ์๋์ฐฝ์ ๋์์ผ ํ๋ค.
- ๊ธฐ์กด์๋ watcher ๋ฅผ ์ฌ์ฉํ์ง๋ง, ์ด๋ฒ์๋ ์ค๋ ๊ณต๋ถํ Lifecycle hook ์ ์ด์ฉํด์ผ ํ๋ค.
- ํํธ) ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋๋ฉด Component ๊ฐ ์ฌ๋ ๋๋ง๋๋๋ฐ ์ด๊ฒ์ ๋ผ์ดํ์ฌ์ดํด ์ฉ์ด๋ก update ๋ผ๊ณ ํ๋ค.
- ์์ฉ์ผ๋ก 2๋ผ๋ ๊ฒ์ ์ ๋ ฅํ์ ๋, ๊ฐ์ ๋ก ๊ฐ์ ๋ฐ๊พธ์ด๋ณด์!
๐ค ๊ณผ์ ์๊ฐํด๋ณด๊ธฐ
- update ๊ฐ ๋๊ธฐ ์ ์ Lifecycle hook ์ ๊ฑธ์ด์ผ ํ๋ฏ๋ก beforeUpdate() ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
- ๊ณผ์ ์์ฒด๋ ์ด๋ ต์ง ์์์ง๋ง, months ์ watcher ๋ฅผ ์ฌ์ฉํ๋ ์ค์๋ ์ด์ํ๊ฒ ๋์์ ํ๊ธฐ์ months ์ ์ฌ์ฉํ๊ณ ์๋ watcher ๋ฅผ ์ฃผ์์ฒ๋ฆฌํ๋๊น ์ ์์ ์ผ๋ก ๋์ํ๋ ๊ฒ์ ํ์ธํ ์ ์์๋ค.
๐ค ์ฝ๋ ์์ฑํ๊ธฐ
// Modal.vue ์ ์ฒด ์ฝ๋ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
// ์ ์ฒด ์ฝ๋์ ๋ด์ฉ์ด ๋๋ฌด ๊ธธ์ด ๋ถํ์ํ ๋ถ๋ถ์ ์ ์ธํ๋ค.
<script>
export default {
beforeUpdate(){
if (this.months === '2'){
alert('2๊ฐ์์ ์ ํ์ด ๋ถ๊ฐํฉ๋๋ค.')
this.months = '';
}
}
</script>
728x90
๋ฐ์ํ