안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 레고 블록(컴포넌트)들도 생명이 있다는 사실, 알고 계셨나요? 오늘은 블록이 화면에 처음 나타날 때부터 사라질 때까지의 과정을 관리하는 라이프사이클 훅(Lifecycle Hooks)에 대해 배워볼게요!
1. 라이프사이클: 웹사이트의 일생
강아지가 태어나고, 쑥쑥 자라고, 잠을 자러 가는 것처럼 Vue.js의 컴포넌트도 일생이 있어요. 이 과정마다 우리가 마법 주문을 걸어줄 수 있답니다.
- Mounted (탄생): 블록이 화면에 짠! 하고 나타나는 순간이에요. 이때 “반가워!”라고 인사하거나 노래를 틀 수 있죠.
- Updated (변신): 데이터가 바뀌어서 화면 모습이 변할 때예요. 옷을 갈아입는 순간이라고 생각하면 돼요!
- Unmounted (안녕): 블록이 화면에서 사라질 때예요. 장난감을 다 가지고 놀고 상자에 정리하는 시간이죠.
2. 왜 이 마법이 필요한가요?
예를 들어, 화면이 나타나자마자 서버에서 마법 재료(데이터)를 가져오고 싶을 때는 ‘Mounted’ 마법을 써야 해요. 또 화면이 사라질 때 켜져 있던 마법 음악을 끄고 싶다면 ‘Unmounted’ 마법을 사용하면 된답니다. 아주 똑똑한 정리가 가능해지죠!
3. 실전 마법: 태어날 때 인사하는 인형 만들기
컴포넌트가 나타나고 사라질 때 어떤 일이 생기는지 코드로 확인해 볼까요?
<script>
const { createApp } = Vue;
createApp({
data() {
return { message: '마법 준비 중...' }
},
// [1. 탄생 마법]
mounted() {
console.log('블록이 화면에 나타났어요!');
this.message = '세상에 나온 걸 환영해! ✨';
},
// [2. 변신 마법]
updated() {
console.log('화면이 바뀌었어요!');
},
// [3. 안녕 마법]
unmounted() {
alert('다음에 또 만나요! 장난감 정리 끝!');
}
}).mount('#app');
</script>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 이 개념을 ‘하루 일과’로 설명해 주세요. 아침에 일어나서(Mounted) 씻고 옷을 갈아입고(Updated) 밤에 잠자리에 드는(Unmounted) 과정처럼, 우리가 만드는 프로그램도 규칙적으로 움직인다는 걸 알려주세요. 이렇게 하면 논리적으로 생각하는 힘이 쑥쑥 자라난답니다.
마치며: 흐름을 아는 진정한 마법사
이제 여러분은 단순히 코드를 쓰는 게 아니라, 프로그램의 전체적인 흐름을 관리할 수 있게 되었어요. 정말 멋지죠? 다음 시간에는 **’마법의 지팡이 강화하기(Composition API)’**라는 주제로, 더 현대적이고 강력한 마법을 부리는 법을 배워볼게요. 내일 아침 9시에 다시 만나요!
