계산된 시그널
자동으로 업데이트되는 값을 도출합니다.
계산된 시그널은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
계산된 신호란
computed() 신호는 하나 이상의 다른 신호에서 값을 도출합니다. 원본 신호가 변경되면 계산된 값이 지연 방식으로 다시 계산됩니다. 즉, 무언가가 값을 읽을 때만 계산됩니다.
계산된 신호는 읽기 전용이므로 .set()을 호출할 수 없습니다.
computed 만들기
computed()에 함수를 전달합니다. Angular는 함수 안에서 읽는 모든 신호를 자동으로 추적합니다.
import { signal, computed } from '@angular/core';
const price = signal(100);
const quantity = signal(2);
const total = computed(() => price() * quantity());
console.log(total()); // 200종속성 자동 추적
종속성을 수동으로 선언할 필요가 없습니다. 콜백 안에서 price()와 quantity()를 읽으면 두 신호가 자동으로 종속성으로 등록됩니다.
신호를 조건부로 읽고 해당 부분까지 실행되지 않으면 그 실행에서는 추적되지 않습니다.
const showTax = signal(false);
const tax = signal(20);
const base = signal(100);
const final = computed(() =>
showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency지연 계산과 메모이제이션
계산된 값은 읽을 때만 실행되고 결과를 캐시합니다. 원본이 변경되지 않은 상태에서 두 번 읽으면 함수는 한 번만 실행됩니다.
const a = signal(1);
const doubled = computed(() => {
console.log('recompute');
return a() * 2;
});
doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log계산된 신호 연결하기
계산된 신호는 다른 계산된 신호에 의존할 수 있으며, 이렇게 반응형 그래프를 구성합니다.
const firstName = signal('Ada');
const lastName = signal('Lovelace');
const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());
console.log(greeting()); // Hello, Ada Lovelace컴포넌트에서 computed 사용하기
계산된 신호는 컴포넌트에서 특히 유용합니다. 계산된 값이 실제로 변경될 때만 템플릿이 다시 렌더링됩니다.
import { Component, signal, computed } from '@angular/core';
@Component({
selector: 'app-cart',
template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
items = signal([10, 20, 30]);
total = computed(() => this.items().reduce((a, b) => a + b, 0));
}계산된 신호는 읽기 전용
계산된 신호를 설정하려고 하면 컴파일 시 오류가 발생합니다. 계산된 신호는 오직 파생 상태를 표현하기 위해 존재합니다.
const count = signal(0);
const doubled = computed(() => count() * 2);
// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5); // OK - update the source instead
console.log(doubled()); // 10동등성 비교와 재계산 건너뛰기
기본적으로 계산된 신호는 Object.is를 사용해 비교합니다. 새 계산 값이 이전 값과 같으면 종속된 항목에 알리지 않으므로 불필요한 작업을 피할 수 있습니다.
const value = signal(2);
const isEven = computed(() => value() % 2 === 0);
// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes사용자 지정 동등성 함수
equal 옵션을 전달하여 계산된 값이 변경된 것으로 간주되는 시점을 제어할 수 있습니다. 객체나 배열에 유용합니다.
const data = signal({ id: 1, name: 'A' });
const view = computed(
() => data(),
{ equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changescomputed에서 부수 효과 피하기
계산된 신호는 순수해야 합니다. HTTP 호출, 동작으로서의 로깅, 다른 신호 변경을 해서는 안 됩니다. 부수 효과는 effect()에 작성합니다. 계산된 신호를 순수하게 유지하면 반응형 그래프를 예측할 수 있습니다.
computed와 메서드 비교
템플릿 메서드는 변경 감지 주기마다 실행됩니다. 계산된 신호는 종속성이 변경될 때만 실행되고 결과를 캐시하므로, 파생 값에는 훨씬 효율적입니다.
// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }
// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));빠른 확인
계산된 신호에 대한 이해도를 확인해 보세요.
복습: 계산된 신호
computed()는 종속성 자동 추적, 지연 평가, 메모이제이션을 지원하는 읽기 전용 파생 신호를 만든다는 것을 배웠습니다.
- 순수하게 유지하세요. 부수 효과를 넣지 마세요.
- 다른 계산된 신호에 의존할 수 있습니다.
- 사용자 지정 변경 감지에는
equal을 사용하세요.
다음 주제: effect()로 부수 효과 실행하기
자주 묻는 질문
“계산된 시그널” 강의는 무료인가요?
네 — “계산된 시그널” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“계산된 시그널”에서 뭘 배우나요?
자동으로 업데이트되는 값을 도출합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“계산된 시그널” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.