angular optimization 2탄(앵귤러 최적화)

- TrackBy

간단한 테스트 코드 작성.

 

- app.component.ts

[참고 1] app.component.ts 파일 내용

- app.component.html

[참고 2] app.component.html

---

[참고 1, 2] 처럼 테스트 코드를 작성 후 html 파일에서 아래 그림과 같이 Refresh items를 클릭한다.

[참고 3] html 화면

→ refresh items를 클릭하면 개발자도구의 Elements의 ul li 부분이 전부 깜빡이는 것을 확인할 수 있다. 이건 렌더링을 새로 한다는 것이므로 성능상 속도를 저하시키는 원인이 될 수 있다. 그럼 어떻게 수정할까?

 

 

- app.component.ts

[참고 4] app.component.ts trackbyfn 내용 추가

- app.component.html

[참고 5] app.component.html

 

[참고 4, 5] 처럼 테스트 코드를 작성 후 html 파일에서 아래 그림과 같이 Refresh items를 클릭한다.

[참고 6] html 화면

→ refresh items를 클릭하면 개발자도구의 Elements의 ul li 부분이 4번째 부분만 변형되서 변형된 데이터만 렌더링 되는 것을 확인할 수 있다.

 

 

요약 - trackby를 사용하여 필요한 부분만 렌더링하여 성능 속도를 더 빠르게 하자!!