Vue Academy · 강의

onUnmounted와 정리 패턴

onUnmounted에서 인터벌을 지우고, 이벤트 리스너를 제거하며, 요청을 취소하는 방법을 다룹니다.

onUnmounted와 정리 패턴은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

사용한 리소스 정리하기

컴포넌트가 제거되어도 컴포넌트가 시작한 타이머, 이벤트 리스너, 구독, 네트워크 요청은 중지하지 않으면 계속 실행됩니다. onUnmounted 훅에서 정리하여 메모리 누수와 버그를 방지하세요.

onUnmounted 훅

onUnmounted는 컴포넌트가 DOM에서 제거된 후 실행됩니다. 리소스를 해제할 수 있는 마지막 기회입니다.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

패턴: 반복 타이머 정리

onMounted에서 반복 타이머를 시작했다면 onUnmounted에서 정리하세요. 그렇지 않으면 컴포넌트가 사라진 후에도 콜백이 계속 실행되어, 존재하지 않는 상태에 접근하다가 충돌하는 경우가 많습니다.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

패턴: 이벤트 리스너 제거

window나 document에 등록한 전역 이벤트 리스너는 컴포넌트가 제거된 후에도 남아 있습니다. 항상 addEventListener와 removeEventListener를 함께 사용하세요.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

패턴: 가져오기 요청 중단

언마운트 후 완료되는 대기 중인 요청은 이미 제거된 컴포넌트의 상태를 변경할 수 있습니다. 정리 과정에서 AbortController를 사용해 요청을 취소하세요.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

패턴: 구독 해제

저장소, 소켓 또는 이벤트 버스에 대한 구독은 해제해야 합니다. 구독 해제 함수를 저장해 두었다가 onUnmounted에서 호출하세요.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch는 중지 함수를 반환합니다

watch를 호출하면 해당 감시를 중지하는 함수가 반환됩니다. 설정 중에 생성된 감시는 자동으로 중지되지만, 나중에 생성된 감시(예: 다른 콜백 내부에서 생성한 감시)는 직접 중지해야 합니다.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

watchEffect 정리 콜백

watchEffect 안에서는 다음 실행 전이나 중지될 때 정리할 수 있도록 onCleanup 함수를 받습니다. 이를 통해 실행마다 생성되는 리소스를 깔끔하게 관리할 수 있습니다.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

정리가 중요한 이유

정리를 생략하면 메모리 누수(리소스가 해제되지 않음), 중복 이벤트 리스너(마운트할 때마다 누적됨), 오류(콜백이 제거된 상태에 접근함)가 발생합니다. 깔끔한 코드는 설정한 것을 항상 해제합니다.

컴포저블이 자동으로 처리합니다

잘 작성된 컴포저블은 onUnmounted에 자체 정리 작업을 등록합니다. 따라서 useEventListener와 같은 VueUse 컴포저블은 이벤트 리스너를 자동으로 제거합니다. 정리 기능이 내장되어 있기 때문입니다.

정리 확인 목록

setInterval/setTimeout -> 정리하세요.
addEventListener -> 제거하세요.
fetch -> AbortController로 중단하세요.
구독 -> unsubscribe를 호출하세요.
수동으로 만든 감시 -> 반환된 stop 함수를 호출하세요.

빠른 확인

정리에 대한 지식을 테스트해 보세요.

복습

정리의 핵심:

onUnmounted는 제거 후 실행됩니다. 리소스는 이곳에서 해제하세요.
반복 타이머와 제한 시간 타이머를 정리하고, 이벤트 리스너를 제거하며, 가져오기 요청을 중단하고, 구독을 해제하세요.
watch는 필요할 때 onUnmounted에서 호출할 중지 함수를 반환합니다.
watchEffect는 실행마다 정리할 수 있는 onCleanup 콜백을 제공합니다.

자주 묻는 질문

“onUnmounted와 정리 패턴” 강의는 무료인가요?

네 — “onUnmounted와 정리 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“onUnmounted와 정리 패턴”에서 뭘 배우나요?

onUnmounted에서 인터벌을 지우고, 이벤트 리스너를 제거하며, 요청을 취소하는 방법을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“onUnmounted와 정리 패턴” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기