Angular에서의 세분화된 반응성: Part 4 - NestedSignals()()
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
- Angular의 변경 감지 메커니즘과 signal 기반 최적화 기술에 관심 있는 개발자
- 앱 성능 개선을 위해 signal 및 nested signal 활용을 고려하는 중급 이상 개발자
- 난이도: 중급 (Angular의 변경 감지, signal 기반 프레임워크 기본 지식 필요)
핵심 요약
- Angular v18 이상에서 signal 기반 변경 감지 최적화를 통해
HasChildViewToRefresh
상태로 부모 컴포넌트를dirty
로 표기하지 않음 - NestedSignals()() 패턴은 입력값의 참조 변경만 감지하여 중간 컴포넌트의 불필요한 재렌더링 방지
- linkedSignal을 사용한 배열 관리로 대량 리스트/테이블 성능 최적화 가능 (예:
@mmstack/primitives
의mapArray
활용)
섹션별 세부 요약
1. Angular 변경 감지 메커니즘과 signal 기반 최적화
- Angular의 변경 감지 3단계 (Dirty 마킹 → 상태 비교 → DOM 업데이트)
onPush
전략과 v18 이후 signal 기반 변경 감지 최적화 (ZonelessChangeDetection 기능 제외)- 버튼 클릭 시
ZonelessChangeDetection
미사용 시 부모 컴포넌트도dirty
로 표기되는 예외
2. injectable store 활용과 단점
- 상태를
injectable store
에 외부화하여 중간 컴포넌트 재렌더링 방지 - 단점: 재사용성 감소, 유연성 저하 (예:
CountStore
인젝션 예시)
3. NestedSignals()() 패턴과 활용
- signal을 input으로 전달하여 참조 변경만 감지 (예:
{{count()()}}
템플릿 사용) - 객체 감싸기 패턴으로 mutable signal 사용 가능 (예:
CountState
타입 활용) mutable()
을 사용한 inline 값 변경 시 input 업데이트 가능
4. 배열 처리와 linkedSignal 활용
linkedSignal
을 사용한 배열의 signal 안정화 (예:noteContents
배열 구성)mapArray
helper로 generic 배열 변환 처리 (예:@mmstack/primitives
활용)
결론
- NestedSignals()() 패턴과
linkedSignal
은 대규모 리스트 성능 최적화에 효과적 @mmstack/primitives
의mapArray
활용을 통해 일반화된 배열 처리 가능- Angular v20 이후 zone.js optional peer dependency로 signal 기반 프레임워크 전환 가속화 예상