앱을 개발하다보면 컴포넌트 중 일부는 여러가지 이유로 바로 로딩하지 않아도 되는 컴포넌트가 있습니다.
화면에 보이지 않는 영역에 있거나, 무거워서 나중에야 사용하는 컴포넌트가 그런 경우입니다. 이런 컴포넌트들은 나중에 불러오도록 지연 로딩 할 수 있습니다.
참고: 자세한 내용은 지연 로딩하기: @defer 심화 가이드 문서를 참고하세요.
이번 에제에서는 컴포넌트 템플릿의 특정 영역을 지연 로딩하는 방법을 알아봅시다.
-
comments컴포넌트를@defer블록으로 감싸서 지연 로딩 영역으로 지정해 보세요예제 앱에서 댓글 컴포넌트는 블로그 글이 표시되는 영역 아래에 표시됩니다.
그러면 댓글 컴포넌트를
@defer블록으로 감싸서 이후에 불러올 수 있습니다.@defer { <comments />}위 코드는
@defer블록을 사용하는 아주 간단한 예제입니다. 이제@defer블록 안에 있는 댓글 컴포넌트는 브라우저가 유휴상태일 때 로딩됩니다. -
@placeholder블록을 추가해 보세요@defer블록 뒤에@placeholder블록을 추가해 보세요.@placeholder블록은 지연 로딩되는 뷰가 로딩되기 전에 표시할 HTML을 넣는 곳입니다.@placeholder블록 안에 있는 내용은 즉시 로딩됩니다.@defer { <comments />} @placeholder { <p>Future comments</p>} -
@loading블록을 추가해 보세요@defer블록 뒤에@loading블록을 추가해 보세요.@loading블록은 지연 로딩되는 뷰가 로딩되는 동안 표시할 HTML을 넣는 곳입니다.@loading블록 안에 있는 내용도 즉시 로딩됩니다.@defer { <comments />} @placeholder { <p>Future comments</p>} @loading { <p>Loading comments...</p>} -
최소 지연시간을 추가해 보세요
@placeholder와@loading섹션은 로딩이 너무 빨리 시도될 때 발생하는 플리커링을 방지하기 위해 옵션을 받을 수 있습니다. 그래서@placeholder블록에는minimum옵션이 있으며,@loading블록에는minimum옵션과after옵션이 있습니다.@loading블록에minimum을 추가해서 로딩 표시 최소 시간을 2초로 지정해 보세요.@defer { <comments />} @placeholder { <p>Future comments</p>} @loading (minimum 2s) { <p>Loading comments...</p>} -
뷰포트 트리거를 추가해 보세요
뷰를 지연 로딩할 때 사용할 수 있는 트리거 옵션이 몇가지 있습니다. 화면이 뷰포트 영역을 만났을 때 내용물을 로딩하는 트리거를 추가해 봅시다.
@defer (on viewport) { <comments />} -
본문 내용을 추가해 보세요
뷰포트 트리거는 화면 아래에 있는 내용물이 스크롤해야 볼 수 있을 정도로 멀리 있을 때 사용하는 것이 가장 좋습니다. 그래서 블로그 게시물로 표시할 내용을 추가해 봅시다. 내용을 직접 작성해도 되고 아래 내용을
<article>엘리먼트 안에 붙여 넣어도 됩니다.<article> <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p> <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p> <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p> <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p> <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p> <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted.</p></article>코드를 추가하고 나면 이제 화면을 내려서 지연 로딩하는 뷰가 화면 안에 들어올 때 댓글 컴포넌트가 로딩되는 것을 확인할 수 있습니다.
이번 예제에서는 일부 화면 영역을 지연 로딩하는 방법을 알아봤습니다. 정말 잘하셨습니다. 🙌
예제에서 다룬 것 외에도, 트리거는 다양한 종류가 있고, 사전에 로딩할 수도 있으며, @error 블록을 활용할 수도 있습니다.
더 자세한 내용은 뷰 지연 로딩 문서를 참고하세요.