Say Goodbye to ngOnChanges() ..Hello Signal @Input in Angular 20
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- Angular 개발자 (중급~고급)
- 반응형 프로그래밍 및 신규 기능 사용자
- RxJS 대체 방안 탐구 중인 개발자
핵심 요약
@Input({ signal: true })
로 신호 기반 입력 처리 가능 (기존ngOnChanges()
대체)- Signal
타입으로 선언 시 자동 변경 감지 및 computed() 연산자 활용 가능 effect()
로 의존성 변경 시 자동 실행되는 반응형 로직 구현
섹션별 세부 요약
1. 신호 기반 @Input 소개
@Input({ signal: true })
선언 시Signal
타입 자동 생성name()
함수 호출 시 의존성 추적 및 자동 갱신- 기존
ngOnChanges()
대체로 수동 변경 감지 제거
2. 코드 예시 및 구현
- GreetingComponent
```ts
@Input({ signal: true }) name!: Signal
```
name()
호출 시 템플릿 내{{ name() }}
자동 갱신- UserInfoComponent
```ts
isLongName = computed(() => this.name().length > 5);
effect(() => console.log('User name changed:', this.name()));
```
- computed()로 의존성 기반 계산 로직 구현
3. 주요 이점
- 자동 변경 감지 (ngOnChanges() 제거)
- 반응형 프로그래밍 (signal + effect 패턴)
- 성능 향상 (의존성 추적 최적화)
결론
- Angular 20의 Signal @Input은
ngOnChanges()
대체로 코드 간결성 및 성능 향상 가능 - Signal
타입과 computed(), effect() 활용 시 반응형 앱 개발에 적합 - 신규 프로젝트에서는 반드시 신호 기반 입력 처리 권장