Angular에서 기본 라우팅 설정하기

이제 라우팅을 설정해 보겠습니다. 브라우저 주소창에 URL /aaaa/을 입력하면 첫 번째 컴포넌트가 표시되고, /bbbb/을 입력하면 두 번째 컴포넌트가 표시되도록 만들겠습니다.

이러한 설정은 파일 app.routes.ts에서 이루어집니다. 먼저 우리의 컴포넌트를 임포트해야 합니다:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

이제 어떤 URL이 어떤 컴포넌트에 해당하는지 지정해야 합니다. 이를 위해 라우트(routes) 객체의 특별한 배열을 만들어야 합니다. 각 객체에는 URL(끝에 슬래시 없이)을 지정하는 path 키와, 해당 URL에서 표시될 컴포넌트를 지정하는 component 키가 있습니다:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

그러나 라우팅 설정만으로는 충분하지 않습니다. 부모 컴포넌트에 우리의 컴포넌트가 렌더링될 위치를 지정해야 합니다. 이 작업은 다음 강의에서 다루겠습니다.

app.routes.ts 파일에서 라우팅을 설정하세요.