라이프사이클 단계 개요
생성, 마운트, 업데이트, 마운트 해제 단계에서 각각 어떤 일이 일어나는지 알아봅니다.
라이프사이클 단계 개요은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
컴포넌트에도 생명주기가 있습니다
모든 Vue 컴포넌트는 예측 가능한 생명주기를 거칩니다. 컴포넌트가 생성되고, 페이지에 마운트되며, 데이터가 변경될 때 업데이트된 후, 마지막으로 제거됩니다. 이것이 생명주기 단계이며, Vue에서는 각 단계에 연결할 수 있습니다.
네 가지 단계
- 생성 — setup이 실행되고 반응성이 초기화됩니다.
- 마운트 — DOM이 생성되어 삽입됩니다.
- 업데이트 — 반응형 변경으로 다시 렌더링됩니다.
- 마운트 해제 — 컴포넌트가 제거되고 정리됩니다.
1단계: 생성
먼저 컴포넌트 인스턴스가 생성되고 반응성이 연결됩니다. Composition API에서는 <script setup>(또는 setup())가 이 단계에서 실행됩니다. 아직 DOM이 존재하지 않으므로 이 시점에는 요소를 읽을 수 없습니다.
생성 단계에서 할 수 있는 작업
생성 단계는 반응형 상태를 선언하고 데이터 가져오기 시작처럼 DOM과 관련 없는 작업을 시작하기에 좋습니다. 단, 템플릿은 아직 렌더링되지 않았으므로 DOM 참조는 여전히 비어 있다는 점을 기억하세요.
<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>2단계: 마운트
다음으로 Vue는 템플릿에서 실제 DOM 노드를 생성하고 페이지에 삽입합니다. 마운트가 끝나면 템플릿 참조가 실제 요소를 가리키므로 DOM을 측정하거나 조작할 수 있습니다.
마운트 훅
onMounted는 컴포넌트가 삽입된 직후 한 번 실행됩니다. 차트 초기화나 입력 요소에 포커스 맞추기처럼 DOM에 의존하는 설정을 수행하기에 적합한 곳입니다.
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('in the DOM now')
})
</script>3단계: 업데이트
컴포넌트가 의존하는 반응형 데이터가 변경되면 Vue는 효율적으로 다시 렌더링하고 DOM을 패치합니다. 변경된 부분만 처리합니다. 이 업데이트 주기는 컴포넌트의 생명주기 동안 여러 번 발생할 수 있습니다.
업데이트 훅
onBeforeUpdate는 DOM이 패치되기 직전에 실행되고, onUpdated는 바로 다음에 실행됩니다. 렌더링에 영향을 주는 반응형 변경이 발생할 때마다 실행됩니다.
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console.log('DOM patched')
})
</script>4단계: 마운트 해제
v-if, 경로 변경, 목록에서의 제거 등을 통해 컴포넌트가 제거되면 Vue는 컴포넌트를 해체합니다. 이때 타이머, 리스너, 구독을 정리하여 메모리 누수를 방지할 수 있습니다.
마운트 해제 훅
onUnmounted는 컴포넌트가 제거된 후 실행됩니다. 이곳에서 반복 타이머를 취소하고 전역 리스너를 제거하며 진행 중인 요청을 중단하세요.
<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>전체 실행 순서
컴포넌트의 생명주기에서 훅은 다음 순서로 실행됩니다. setup, onBeforeMount, onMounted가 실행된 다음 onBeforeUpdate/onUpdated 쌍이 반복되고, 마지막으로 onBeforeUnmount/onUnmounted가 실행됩니다.
빠른 확인
생명 주기에 대한 이해를 확인해 보세요.
복습
이제 전체 흐름을 살펴보겠습니다.
- 생성: 설정이 실행되고 반응성이 준비되지만 DOM은 없습니다.
- 마운트: DOM이 생성되어 삽입되고, 참조를 사용할 수 있게 됩니다.
- 업데이트: 반응성 데이터의 변경이 효율적인 패치를 트리거합니다.
- 언마운트: 컴포넌트가 제거되며, 이 단계에서 정리합니다.
자주 묻는 질문
“라이프사이클 단계 개요” 강의는 무료인가요?
네 — “라이프사이클 단계 개요” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“라이프사이클 단계 개요”에서 뭘 배우나요?
생성, 마운트, 업데이트, 마운트 해제 단계에서 각각 어떤 일이 일어나는지 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“라이프사이클 단계 개요” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.