Angular Academy · 강의

이펙트 정리와 수명 주기

이펙트 내부에서 리소스를 정리합니다.

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

정리가 중요한 이유

Effect는 타이머, 구독, 이벤트 리스너와 같은 리소스를 시작할 수 있습니다. Effect가 다시 실행될 때마다 이전 리소스를 먼저 해제해야 합니다. 그렇지 않으면 타이머와 리스너가 누수됩니다. Angular는 이를 위해 onCleanup 훅을 제공합니다.

onCleanup 콜백

Effect 함수는 onCleanup 함수를 받습니다. 이 함수로 정리 콜백을 등록하면 Angular가 다음 실행 전과 소멸 시점에 콜백을 호출합니다.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

다시 실행하기 전에 정리하기

종속성이 변경되면 Angular는 먼저 등록된 정리 함수를 호출한 다음 effect 본문을 다시 실행합니다. 따라서 한 번에 하나의 활성 리소스만 존재하도록 보장합니다.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

이벤트 리스너 정리하기

Effect에서 추가한 DOM 리스너는 중복 핸들러와 누수를 방지하기 위해 정리 과정에서 제거해야 합니다.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

구독 정리하기

Effect에서 Observable을 구독했다면 정리 과정에서 구독을 취소하세요. 보통은 다른 도구를 사용하지만, 여기서는 패턴을 보여 주기 위한 예입니다.

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

소멸 시 정리하기

Effect를 소유한 컴포넌트가 소멸되면 Angular가 최종 정리를 자동으로 실행한 다음 effect를 소멸시킵니다. 누수되는 타이머는 남지 않습니다.

순서: 정리한 후 본문 실행

Effect가 처음 실행될 때는 정리할 것이 없습니다. 두 번째 실행부터는 항상 다음 순서로 진행됩니다: 정리 -> 본문

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

정리 없이 무거운 작업을 수행하지 않기

Effect에서 시작한 오래 유지되는 리소스에는 반드시 그에 대응하는 정리가 있어야 합니다. 흔한 버그는 정리를 잊어 종속성이 변경될 때마다 인터벌이 계속 쌓이는 것입니다.

manualCleanup 옵션

컴포넌트 외부에서 만들어진 effect(예: 영구적으로 유지되는 루트 서비스)가 있다면 manualCleanup 옵션을 사용한 다음 적절한 시점에 직접 ref.destroy()를 호출할 수 있습니다.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

대안으로 사용하는 DestroyRef

Effect가 아닌 정리에는 DestroyRef를 주입하고 onDestroy로 콜백을 등록할 수 있습니다. Effect 내부에서는 실행마다 필요한 정리에 onCleanup을 우선 사용하세요.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

종합하기

디바운스된 동기화 effect에서는 값이 변경될 때마다 이전 타이머를 취소하고 새로운 저장 작업을 예약합니다.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

빠른 확인

Effect 정리에 대한 이해도를 확인해 보세요.

복습: Effect 정리와 수명 주기

Effect 내부에서 시작한 리소스를 해제하려면 onCleanup 매개변수를 사용하세요.

정리는 다시 실행되기 전과 소멸 시점에 실행됩니다.
타이머, 리스너, 구독은 항상 정리하세요.
오래 유지되는 effect에는 manualCleanup을, 일반적인 정리에는 DestroyRef를 사용하세요.

다음 주제: linkedSignal과 고급 패턴

자주 묻는 질문

“이펙트 정리와 수명 주기” 강의는 무료인가요?

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

“이펙트 정리와 수명 주기”에서 뭘 배우나요?

이펙트 내부에서 리소스를 정리합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“이펙트 정리와 수명 주기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기