지연 로딩 트리거

@defer의 기본 옵션만으로도 컴포넌트 일부를 편리하게 지연 로딩할 수 있지만, 지연 로딩 동작을 더 세밀하게 조정해야 할 수 있습니다.

기본적으로 지연 로딩할 내용은 브라우저가 유휴 상태일 때 로딩됩니다. 하지만 트리거를 지정하면 로딩 시점을 조정할 수 있습니다. 컴포넌트에 가장 적합한 로딩 동작을 선택할 수 있습니다.

지연 로딩 뷰는 두 가지 로딩 트리거를 제공합니다:

나중에 when 조건이 false로 평가되어도 defer 블록은 플레이스홀더로 되돌아가지 않습니다. 내용 교체는 한 번만 실행됩니다.

이벤트 트리거를 여러 개 정의할 수도 있습니다. 여러 트리거는 OR 조건으로 평가됩니다.

• 예: @defer (on viewport; on timer(2s))
• 예: @defer (on viewport; when customizedCondition)

이번 실습에서는 트리거를 사용해서 지연 로딩 뷰를 로딩할 조건을 지정하는 방법을 배웁니다.

1. on hover 트리거 추가하기

   app.ts에서 @defer 블록에 on hover 트리거를 추가합니다.

   @defer (on hover) {
     <article-comments />
   } @placeholder (minimum 1s) {
     <p>Placeholder for comments</p>
   } @loading (minimum 1s; after 500ms) {
     <p>Loading comments...</p>
   } @error {
     <p>Failed to load comments</p>
   }

   이제 플레이스홀더 위로 마우스 포인터를 이동해야 댓글 영역이 렌더링됩니다.

2. Show all comments 버튼 추가하기

   이제 템플릿에 "Show all comments"라고 표시되는 버튼을 추가합니다. 버튼에 #showComments 템플릿 변수도 지정하세요.

   <button type="button" #showComments>Show all comments</button>
   
   @defer (on hover) {
     <article-comments />
   } @placeholder (minimum 1s) {
     <p>Placeholder for comments</p>
   } @loading (minimum 1s; after 500ms) {
     <p>Loading comments...</p>
   } @error {
     <p>Failed to load comments</p>
   }

   NOTE: 자세한 내용은 템플릿 변수 문서를 확인하세요.

3. on interaction 트리거 추가하기

   템플릿의 @defer 블록에 on interaction 트리거를 추가합니다. interaction의 인자로 showComments 템플릿 변수를 전달하세요.

   <button type="button" #showComments>Show all comments</button>
   
   @defer (on hover; on interaction(showComments)) {
     <article-comments />
   } @placeholder (minimum 1s) {
     <p>Placeholder for comments</p>
   } @loading (minimum 1s; after 500ms) {
     <p>Loading comments...</p>
   } @error {
     <p>Failed to load comments</p>
   }

   이렇게 수정하면 다음 조건 중 하나가 충족되었을 때 댓글 영역을 렌더링합니다:

   • 사용자가 댓글 영역의 플레이스홀더 위로 마우스 포인터를 이동했을 때
   • 사용자가 "Show all comments" 버튼을 클릭했을 때

   페이지를 새로고침하면서 각 트리거로 댓글 영역이 렌더링되는지 확인해 보세요.

더 알아보려면 지연 로딩 뷰 문서를 확인하세요. 계속 학습하면서 Angular의 다양한 기능을 활용해 보세요.