Angular Academy · 강의

이펙트와 부수 효과

이펙트로 시그널 변경에 반응합니다.

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

Effect란

effect()는 자신이 읽는 신호가 변경될 때마다 함수를 실행합니다. computed와 달리 effect는 부수 효과를 위한 것입니다. 로깅, localStorage 동기화, API 호출, DOM 조작 등에 사용합니다.

Effect는 값을 반환하지 않습니다.

Effect 만들기

Effect는 즉시 한 번 실행된 다음, 추적 중인 신호가 변경될 때마다 다시 실행됩니다.

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Effect에는 주입 컨텍스트가 필요합니다

기본적으로 effect()는 주입 컨텍스트에서 만들어야 합니다. 일반적으로 컴포넌트, 지시문 또는 서비스의 생성자나 필드 초기화 구문에서 만듭니다.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

종속성 자동 추적

계산된 신호와 마찬가지로 effect는 런타임에 실제로 읽는 신호만 정확히 추적합니다. 조건부 읽기는 해당 코드에 도달했을 때만 추적됩니다.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

신호를 localStorage와 동기화하기

Effect의 대표적인 사용 사례는 상태가 변경될 때마다 저장하는 것입니다.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Effect는 값을 반환하지 않습니다

파생 값이 필요하다면 computed()를 사용하세요. Effect는 반환 값이 없는 동작을 위한 것이며, 그 결과 자체가 부수 효과입니다.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Effect 안에서 신호 설정하기

Angular는 무한 루프를 방지하기 위해 기본적으로 effect 내부에서 신호에 값을 쓰는 것을 허용하지 않습니다. 정말 필요하다면 { allowSignalWrites: true }를 전달하세요. 다만 파생 값에는 computed를 우선 사용하세요.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

EffectRef로 수동 정리하기

effect()는 EffectRef를 반환합니다. 소유자가 소멸하기 전에 수동으로 중지하려면 .destroy()를 호출하세요.

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

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Effect는 자동으로 정리됩니다

컴포넌트에서 만든 effect는 컴포넌트가 소멸될 때 자동으로 소멸됩니다. 직접 .destroy()를 호출해야 하는 경우는 거의 없습니다.

Effect는 렌더링 후 실행됩니다

Effect는 예약된 후 변경 감지 다음에 마이크로태스크 단위로 일괄 실행됩니다. 여러 신호를 동기적으로 변경해도 effect는 한 번만 실행됩니다.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

effect와 computed 중 선택하기

computed: 신호에서 값을 도출합니다(순수함).
effect: 신호에 반응하여 외부 동작을 수행합니다(비순수함).

Effect에서 값을 반환하고 있다면 computed가 필요할 가능성이 큽니다.

빠른 확인

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

복습: Effect

effect()는 추적 중인 신호가 변경될 때마다 함수를 실행하며, 부수 효과만 처리합니다.

즉시 한 번 실행된 후 종속성이 변경될 때마다 실행됩니다.
주입 컨텍스트가 필요합니다.
소유자와 함께 자동으로 소멸하며, 수동 제어를 위해 EffectRef를 반환합니다.
파생에는 computed를, 동작에는 effect를 사용하세요.

다음 주제: effect 내부에서 리소스 정리하기

자주 묻는 질문

“이펙트와 부수 효과” 강의는 무료인가요?

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

“이펙트와 부수 효과”에서 뭘 배우나요?

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

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

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

“이펙트와 부수 효과” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기