Angular Signals 최적화: 중첩된 시그널 및 linkedSignal을 활용한 성능 향상 전략

핵심 기술

Angular Signals의 변경 감지 메커니즘을 이해하고, 중첩된 시그널(nested signals) 및 linkedSignal과 같은 고급 패턴을 활용하여 애플리케이션의 렌더링 성능을 최적화하는 방법을 설명합니다. 특히 onPush 전략과 zoneless 환경에서의 시그널 기반 성능 개선에 초점을 맞춥니다.

기술적 세부사항

• Angular 변경 감지 기본: 컴포넌트를 더럽게 표시(mark as dirty), 상태 차이 확인, DOM 업데이트의 세 가지 연산으로 구성됩니다.
• onPush 전략: 변경 감지 최적화를 위한 기존 접근 방식입니다.
• Signals와 변경 감지: Angular v18부터 도입된 signal scheduler는 시그널 사용 시 부모 컴포넌트를 HasChildViewToRefresh로만 표시하여 성능을 향상시킵니다.
• Zoneless 환경: 버튼 클릭과 같은 이벤트가 부모 컴포넌트를 dirty로 표시하는 것을 피하기 위한 최적화 방안을 논의합니다 (v20에서 zone.js 옵션화).
• Signals를 Input으로 전달: 자식 컴포넌트에 시그널 자체를 input으로 전달하여, 해당 시그널이 사용되는 부분만 리렌더링되도록 하는 최적화 기법을 소개합니다.
• 중첩된 시그널 (Nested Signals): 입력(input)에서 참조 동등성(referential equality)을 활용하여, 객체나 함수의 참조가 변경되지 않으면 컴포넌트가 체크되지 않도록 하는 방식입니다.
• Wrapping Signals: 시그널을 객체로 감싸(wrap) 전달하여 코드의 가독성을 높이고 참조 안정성을 유지하는 방법을 설명합니다 (@mmstack/forms 라이브러리 예시).
• Mutable Signals: mutable 시그널과 함께 사용할 때의 이점과 참조 동등성 문제를 해결하는 방법을 언급합니다.
• linkedSignal 활용: 배열과 같이 복잡한 데이터 구조에서 각 요소의 변경을 효율적으로 추적하고 UI 업데이트를 최소화하는 방법을 linkedSignal을 사용하여 시연합니다. 이는 배열의 구조 변경이나 요소 값 변경 시에도 안정적인 참조를 유지하며 필요한 부분만 업데이트하는 데 유용합니다.
• 배열 처리: @for 루프에서 배열이 변경될 때 전체 리스트가 재렌더링되는 문제를 해결하기 위해 시그널의 배열을 사용하고 linkedSignal로 관리하는 방안을 제시합니다.
• @mmstack/primitives: mapArray와 같은 유틸리티를 통해 배열을 시그널의 배열로 변환하는 방법을 소개합니다.

개발 임팩트

• 성능 향상: 불필요한 변경 감지 사이클을 줄여 애플리케이션의 전반적인 렌더링 성능을 크게 향상시킬 수 있습니다.
• 코드 가독성 및 유지보수성: 시그널 중심의 접근 방식은 코드를 더 예측 가능하고 관리하기 쉽게 만듭니다.
• 대규모 애플리케이션 최적화: 특히 대규모 데이터 테이블이나 리스트를 다루는 애플리케이션에서 그 효과가 두드러집니다.
• 미래 지향적 개발: Angular의 Signals 중심 생태계 전환에 발맞춰 최신 기술 동향을 따르는 개발 방식을 습득할 수 있습니다.

커뮤니티 반응

• 저자는 중첩된 시그널 사용 시 count()()와 같이 이중 호출이 weird해 보일 수 있다고 인정하지만, 이는 시그널 기반 프레임워크의 미래 지향적 개발 패턴임을 강조합니다.
• SolidJS의 렌더러가 유사한 방식으로 동작함을 언급하며, 이러한 패턴의 보편성을 시사합니다.

톤앤매너

전문적이고 정보 전달에 집중하는 톤을 유지하며, 개발자가 실제 코드를 통해 적용할 수 있는 구체적인 패턴과 예시를 제공합니다. Angular의 최신 기능과 미래 방향에 대한 긍정적인 전망을 담고 있습니다.