RouterLink 사용하기

지금까지 개발한 앱은 앱 내부에 있는 링크를 클릭하면 화면 전체가 새로 고쳐집니다. 규모가 작은 앱이라면 별 문제 없겠지만, 화면을 구성하는 내용이 많고 사용자가 리소스를 다시 다운받고 계산을 다시 실행해야 한다면 전체적인 앱 성능에 영향을 미칠 수 있습니다.

참고: 자세한 내용은 앱에 라우팅 규칙 추가하기 심화 가이드 문서를 참고하세요.

이번 예제에서는 RouterLink 디렉티브를 사용해서 Angular Router의 활용성을 극대화 해봅시다.

1. RouterLink 디렉티브를 불러옵니다

   @angular/router 패키지로 제공되는 RouterLink 디렉티브를 app.ts 파일에 불러와서 컴포넌트 데코레이터의 imports 배열에 추가합니다.

         
   ...import { RouterLink, RouterOutlet } from '@angular/router';@Component({  imports: [RouterLink, RouterOutlet],  ...})
       

2. 템플릿에 routerLink 를 추가하세요

   RouterLink 디렉티브를 사용하려면 href 어트리뷰트를 routerLink로 변경하면 됩니다. 이렇게 수정하면 됩니다.

         
   import { RouterLink, RouterOutlet } from '@angular/router';@Component({  ...  template: `    ...    <a routerLink="/">Home</a>    <a routerLink="/user">User</a>    ...  `,  imports: [RouterLink, RouterOutlet],})
       

이제 사용자가 링크를 클릭하면 화면 전체가 새로 로드되면서 깜빡이는 것 없이, 원하는 컴포넌트가 화면에 표시됩니다 🎉

잘 하셨습니다. 하지만 여기까지 알아본 것은 Router API가 제공하는 전체 기능 중 아주 일부분입니다. 더 자세한 내용은 Angular Router 문서를 참고하세요.