[Angular] 컴포넌트 없이 라우팅 구성

컴포넌트 없이 라우팅을 구성하는 방법입니다.

분석

• Routing을 설정하면 Component를 일반적으로 아래와 같이 설정합니다.

   {path: '', component: AppComponent, children: [
    { path: '', redirectTo: 'main', pathMatch: 'full' },
    { path: 'main', component: MainComponent },       
   ...
   ]}

이 때 "/" 나 "/main"을 입력하여 MainComponent에 접근하려면

반드시 AppComponent를 거친 후 redirectTo에 의해 MainComponent를 호출하게 됩니다.


만일 Bootstrap으로 구성하는 경우라면 Bootstrap과 Routing에 의해

AppComponent가 2번 호출되어 이중 호출되는 경우가 발생하게 됩니다.

또한, AppComponent가 별다른 기능없이 routing만 관여하는 <router-outlet></router-outlet> 만 있는 parentComponent인 경우라면

Componentless Routing을 활용하여 아예 무의미한 component 생성을 피할 수 있는 장점도 있습니다.

해결 방법

Componentless Routing 을 사용하여 해결할 수 있습니다.

component 항목을 제거하면 되며, 이 경우 children에서 설정한 redirectTo 페이지로 바로 접근할 수 있습니다.

단, 부모가 없으므로 반드시 부모 대신 default로 받아줄 자식을 redirectTo로 지정하여야 합니다.

 {path: '', children: [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
	  { path: 'main', component: MainComponent },
 ...
 ]}

이 경우 MainComponent에 접근하려는 경우 "/" 또는 "/main"을 입력하였을 때 redirectTo에 의해 MainComponent를 호출하는데

부모가 없으므로 호출한 대상의 <router-outlet>\</router-outlet> 에 포함되게 됩니다.

따라서 조금 더 간단한 routing과 component를 구성할 수 있을 것입니다.