0Pricing
Sveltejs Academy · 강의

destroy() 정리 함수

동작에서 destroy 함수를 반환해 이벤트 수신기와 감시자를 정리합니다.

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

정리가 필요한 이유

액션은 리스너나 옵저버를 추가하는 경우가 많습니다. 정리를 수행하면 요소가 언마운트될 때 메모리 누수를 방지할 수 있습니다.

destroy 반환

액션은 destroy() 함수를 포함한 객체를 반환할 수 있습니다. Svelte는 언마운트될 때 이 함수를 호출합니다.

function listen(node) {
  function onClick() { /* ... */ }
  node.addEventListener("click", onClick);
  return { destroy() { node.removeEventListener("click", onClick); } };
}

리소스와 함께 사용하기

할당한 모든 것(리스너, 옵저버, 인터벌)은 destroy에서 해제해야 합니다.

멱등적인 destroy

destroy는 한 번 호출됩니다. 그래도 언마운트가 반복되는 경우에 대비해 방어적으로 작성하십시오.

update와 destroy 결합하기

전체 수명 주기를 처리하려면 두 함수를 모두 반환하십시오. 매개변수 변경에 반응하고 언마운트 시 정리할 수 있습니다.

옵저버

destroy에서 IntersectionObservers, ResizeObservers, MutationObservers를 일시 중지하고 연결을 해제하십시오.

애니메이션 프레임

불필요한 작업을 방지하려면 대기 중인 requestAnimationFrame 반복을 모두 취소하십시오.

비동기 정리

destroy는 동기 함수여도 됩니다. 비동기 정리가 필요하다면 실행 후 기다리지 않는 정리 작업을 시작하십시오.

메모리 프로파일링

브라우저 메모리 도구를 사용하여 언마운트 후 액션이 참조를 해제하는지 확인하십시오.

TypeScript 타입

반환 타입은 svelte/action의 ActionReturn<Params>입니다.

흔한 실수

destroy를 반환하지 않으면 요소가 사라진 후에도 리스너가 연결된 상태로 남습니다. 추가할 때는 항상 제거도 함께 작성하십시오.

빠른 확인

destroy는 언제 실행됩니까?

복습

액션에서 { destroy }를 반환하여 언마운트 시 리스너와 옵저버를 정리하십시오.

자주 묻는 질문

“destroy() 정리 함수” 강의는 무료인가요?

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

“destroy() 정리 함수”에서 뭘 배우나요?

동작에서 destroy 함수를 반환해 이벤트 수신기와 감시자를 정리합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“destroy() 정리 함수” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. use: 지시어 구문
  2. 동작 매개변수와 업데이트
  3. destroy() 정리 함수
  4. 실용적인 동작: clickOutside tooltip autofocus
← Sveltejs Academy(으)로 돌아가기