앵귤러18버전이 정식으로 공개되어 업데이트 내역을 읽어보던 중
주요 변경 사항중 하나로 앵귤러의 change detection에 zoneless, 즉 zone.js를 사용하지 않을 수 있다는 글을 보게 되었다. 이 글에서는 앵귤러v18에서 소개하는 zoneless에 대해서 간단히 정리하고자 한다.
1. Zonelss의 장점
zoneless를 통해 얻는 이점으로는
- 마이크로 프론트엔드 구성에 대한 개선, 다른 프레임워크와의 상호 운용성
- 초기 렌더링과 런타임 속도 향상
- 작아진 번들 크기와 빠른 페이지 로드
- 읽기 쉬워진 스택 트레이스
- 간단해진 디버깅
이와 같은 장점을 내새웠다.
2. Zoneless with signal
그럼 zoneless를 사용하는 가장 좋은 방법은 무엇일까?
공식 홈페이지에 따르면 signal과의 조합을 추천하고 있다.
아래의 코드를 보자.
@Component({
...
template: `
<h1>Hello from {{ name() }}!</h1>
<button (click)="handleClick()">Go Zoneless</button>
`,
})
export class App {
protected name = signal('Angular');
handleClick() {
this.name.set('Zoneless Angular');
}
}이 예제 코드에서 볼 수 있듯이 버튼은 handleClick 메서드를 호출한다. 이 메서드를 통해 signal의 값과 UI는 업데이트된다. 이런 작업들은 zonejs를 사용한 어플리케이션과 유사하게 수행되지만 몇가지 차이점이 있다.
zonejs를 사용할 때 앵귤러에서는 app의 상태(state)가 변경될 때마다 변경 감지를 수행했다.
반면 이런 변경 감지를 zoneless 환경에서는 signal의 업데이트 같은 더 적은 트리거로 수행을 한다.
이런 다중의 연속적인 변경 사항에 대한 확인을 막기위해 새로운 스케줄러도 적용됐다고 한다.
3. 기본적으로 통합
앵귤러18버전부터 zoneless가 기본적으로 적용되어 있다.
zoneless의 적용은 기본적으로 새로운 프로젝트에서만 적용이 가능한데, zone을 사용하는 change detection의 이벤트로 인해 버그가 발생되기 때문이다.
다만, 아래의 코드를 이용해 기존의 프로젝트에서 이벤트를 통합할 수 있다.
bootstrapApplication(App, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true })
]
});4. async/await
Zonejs는 앵귤러의 변경 감지와 연결하기 위해 많은 브라우저 호출을 인터셉트한다.
하지만 Zonejs는 async/await을 조작할 수 없기 때문에 앵귤러팀에서는 이를 promise로 변경할 수 밖에 없었다.
모든 최신 브라우저에서는 promise보다 표현적(expressive)으로 뛰어나고 js런타임에 최적화된 async/await를 지원하고 있다.
Zoneless환경에서는 async/await을 promise로 낮춰 사용할 필요없어 디버깅이 수월해지고, 번들의 크기도 작아지게 되었다.
5. 그럼 Zone.js는 뭐지?
다행히 zone.js에 대한 설명이 잘 번역되어 있는 글이 있어 이 글을 참고하자
