개발/TIL

[230517] 새탭으로 링크 열기(html), Angular 현재 경로, ChangeDetectionStrategy

ash_ 2023. 5. 17. 16:19

https://velog.io/@iooi75/%EA%B3%B5%EB%B6%80-%EB%A7%81%ED%81%AC-%EC%83%88%ED%83%AD%EC%97%B4%EA%B8%B0-%EA%B7%B8%EB%83%A5-%EC%97%B4%EA%B8%B0

 

[TIL] 링크 새탭열기, 그냥 열기

HTML 그냥 열기 네이버로 바로이동 HTML 새창열기 네이버 새탭으로 열기

velog.io

 

https://stackoverflow.com/questions/34597835/how-to-get-current-route

 

How to get current route

The current docs only talk about getting route params, not the actual route segments. For example, if i want to find the parent of current route, how is that possible?

stackoverflow.com

 


ChangeDetectionStrategy

변경 탐지 전략

 

개발자가 데이터 모델을 업데이트하면, 앵귤러는 변화를 감지하고 모든 컴포넌트를 root부터 아래로 검사하면서, 해당 모델의 데이터가 변경되었는지 확인하고, 새로운 값이 있다면 뷰(DOM)을 업데이트 한다.

 

모든 컴포넌트를 확인하면 대규모 애플리케이션에서는 성능 저하가 발생할 수 있다.

그래서 '나는 정해진 이벤트 외에는 변화 감지 안할래' 라고 선언해둘 수 있다.

 

- 기본은 Default 방식

- OnPush 방식을 사용하면, 다른 컴포넌트에서 변화가 발생한 걸 감지하지 않는다.

 

OnPush 방식일 때 감지하는 변화

1. input 레퍼런스 변경 (@Input() 값 변화)

2. 컴포넌트 또는 그것의 자식의 이벤트 핸들러가 트리거 됐을 때

3. 변화감지가 수동으로 트리거 됐을 때

4. async pipe를 통해 템플릿에 연결된 observable이 새로운 값을 emit 할 때

 

여기서 Input 값의 변경 감지는, 새로운 '레퍼런스'일 때만 변화감지가 트리거된다.

즉, object일 경우 object의 내부 속성이 변경되는 것이 아닌, object 자체의 레퍼런스가 바뀌어야 한다.

 

Angular Change Detection 성능 향상방법 (OnPush, ChangeDetectionRef)

The Last Guide For Angular Change Detection You'll Ever Need (한글)

The Last Guide For Angular Change Detection You'll Ever Need