Angular Just Added Arrow Functions to Templates — And I’m Not Sure It’s a Good Idea

Context

기존 Angular에서는 템플릿의 이벤트 핸들링이나 데이터 변환을 위해 컴포넌트 클래스에 별도의 메서드를 정의해야 했습니다. Signal 값 업데이트, 데이터 필터링, 조건부 검색 등 간단한 로직도 클래스 메서드로 구현해야 하므로 보일러플레이트 코드가 증가했습니다.

Technical Solution

• Signal 값 직접 업데이트: 템플릿의 클릭 이벤트에서 selectedHeroId.update(count => count === 1 ? heroes().length : count - 1) 형태로 화살표 함수 인라인 작성 지원
• 필터링과 맵핑 인라인 처리: heroes().filter(hero => hero.name.charAt(0).toLowerCase() === hero.lastName.charAt(0).toLowerCase()).map(hero => ...) 형태로 데이터 변환을 템플릿에서 직접 수행
• 검색 로직 인라인화: heroes().find(hero => hero.email.endsWith('stark.com'))?.name 처럼 데이터 검색을 템플릿 표현식에서 직접 작성
• 함수를 Input으로 전달: sortFn: InputSignal<(a: Hero, b: Hero) => number> 형태로 부모 컴포넌트에서 정렬 함수를 자식 컴포넌트의 Input으로 전달 가능
• 파이프와의 조합: 화살표 함수 실행 결과에 파이프 적용 가능 (예: heroes().find(...)?. name | uppercase)

Key Takeaway

화살표 함수 템플릿 지원은 간단한 데이터 변환에서 보일러플레이트를 줄이지만, 템플릿에 로직이 혼재되는 문제와 다중행 함수 미지원, 함수 반환 불가 등의 제약이 존재하므로 소규모 로컬 변환에만 제한적으로 사용해야 합니다.