AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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 @InputngOnChanges() 대체로 코드 간결성 및 성능 향상 가능
  • Signal 타입과 computed(), effect() 활용 시 반응형 앱 개발에 적합
  • 신규 프로젝트에서는 반드시 신호 기반 입력 처리 권장