라우팅 기초 - 페이지 간 이동하기 & 실습: 간단한 페이지 전환 만들기 (Angular 16 기준)
서론
Angular 16에서 라우팅(Routing)은 애플리케이션 내에서 페이지 간의 이동을 가능하게 해주는 중요한 기능입니다. 단일 페이지 애플리케이션(SPA)에서는 페이지 이동이 실제로는 새로운 페이지를 로드하는 것이 아니라 라우터를 통해 콘텐츠를 동적으로 교체하는 방식으로 구현됩니다. 이를 통해 빠른 페이지 전환과 원활한 사용자 경험을 제공할 수 있습니다. 이번 글에서는 라우팅의 기초 개념을 이해하고, Angular 라우터를 이용해 간단한 페이지 전환을 구현하는 방법을 실습해보겠습니다.
본론
1. 라우팅이란 무엇인가?
라우팅의 개념
라우팅은 사용자가 요청하는 URL 경로에 따라 다른 컴포넌트를 표시하는 기능입니다. Angular의 라우터는 애플리케이션이 SPA 형태로 동작하도록 돕는데, 각 URL에 대해 특정 컴포넌트를 매핑하여 화면에 동적으로 내용을 렌더링합니다.
Angular의 라우팅 구성 요소
Angular 라우팅에는 다음과 같은 주요 구성 요소가 있습니다:
- RouterModule: Angular의 라우팅 기능을 제공하는 모듈로, 라우팅을 설정하고 관리하는 역할을 합니다.
- Routes: 라우팅 설정을 위한 배열로, 각 경로에 매핑된 컴포넌트를 정의합니다.
- RouterOutlet: 각 경로에 맞는 컴포넌트를 표시하는 영역으로, HTML에 <router-outlet> 태그로 추가합니다.
- RouterLink: 사용자 인터페이스에서 다른 페이지로 이동할 수 있게 해주는 지시자로, HTML에서 [routerLink]를 통해 특정 경로로 연결합니다.
2. 실습: 간단한 페이지 전환 만들기
이번 실습에서는 HomeComponent와 AboutComponent 두 가지 컴포넌트를 생성하고, 라우터를 사용해 각 컴포넌트로 이동할 수 있는 간단한 페이지 전환을 구현해보겠습니다.
1) 라우팅 모듈 설정하기
먼저 라우팅을 설정하기 위해 AppRoutingModule을 생성하고, 필요한 라우트 설정을 정의합니다.
ng generate module app-routing --flat --module=app
이 명령어를 실행하면 app-routing.module.ts 파일이 생성되며, AppModule에 자동으로 추가됩니다.
2) 컴포넌트 생성하기
이제 HomeComponent와 AboutComponent를 생성하여 각각 다른 페이지 역할을 하도록 설정합니다.
ng generate component Home
ng generate component About
위 명령어로 두 컴포넌트가 생성되면, src/app/home과 src/app/about 폴더에 각각 home.component.ts와 about.component.ts 파일이 생성됩니다.
3) 라우팅 설정하기
이제 AppRoutingModule에서 경로 설정을 정의해보겠습니다. AppRoutingModule에 라우트 배열을 만들어 각 경로를 컴포넌트에 매핑합니다.
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' }, // 기본 경로를 home으로 리다이렉트
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
- { path: '', redirectTo: '/home', pathMatch: 'full' }: 기본 경로로 접근 시 home으로 리다이렉트하도록 설정합니다.
- { path: 'home', component: HomeComponent }: /home 경로로 접근 시 HomeComponent가 렌더링됩니다.
- { path: 'about', component: AboutComponent }: /about 경로로 접근 시 AboutComponent가 렌더링됩니다.
4) AppComponent에 RouterOutlet 및 RouterLink 추가
app.component.html 파일에 RouterOutlet을 추가해 각 경로에 맞는 컴포넌트를 렌더링할 위치를 지정합니다. 또한, RouterLink를 이용해 간단한 네비게이션 메뉴를 추가합니다.
<!-- app.component.html -->
<nav>
<a routerLink="/home">Home</a> |
<a routerLink="/about">About</a>
</nav>
<!-- 페이지 내용이 표시될 위치 -->
<router-outlet></router-outlet>
- routerLink="/home": Home 링크를 클릭하면 /home 경로로 이동하여 HomeComponent가 표시됩니다.
- routerLink="/about": About 링크를 클릭하면 /about 경로로 이동하여 AboutComponent가 표시됩니다.
- <router-outlet>: 현재 경로에 따라 컴포넌트를 렌더링할 위치입니다.
5) 각 컴포넌트에 내용 추가
각 컴포넌트의 HTML 파일에 간단한 텍스트를 추가해, 페이지 전환 시 내용을 확인할 수 있게 합니다.
<!-- home.component.html -->
<h2>Welcome to the Home Page</h2>
<p>여기는 홈 페이지입니다!</p>
<!-- about.component.html -->
<h2>About Us</h2>
<p>Angular 라우팅을 사용하여 페이지를 전환합니다.</p>
6) 라우팅 확인하기
이제 Angular 개발 서버를 실행하고 브라우저에서 결과를 확인합니다.
ng serve
브라우저에서 http://localhost:4200에 접속하면, 기본 경로는 home으로 리다이렉트되므로 Home 페이지가 표시됩니다. 상단 네비게이션 메뉴에서 About 링크를 클릭하면 About 페이지로 전환됩니다.
결론
이번 글에서는 Angular 16의 라우팅 기초를 학습하고, 간단한 페이지 전환을 구현하는 방법을 실습했습니다. 라우팅을 통해 Angular 애플리케이션 내에서 효율적인 페이지 이동을 구현할 수 있으며, 단일 페이지 애플리케이션(SPA) 형태로 동작하게 되어 더 빠르고 유연한 사용자 경험을 제공합니다. 앞으로 라우팅의 추가 기능을 학습해 더 복잡한 라우팅 구조를 만들어보세요.
Q&A 섹션
- Q1: 라우팅이 필요한 이유는 무엇인가요?
A1: 라우팅은 SPA 애플리케이션에서 페이지 간의 이동을 지원하여 각 페이지에 해당하는 컴포넌트를 동적으로 렌더링할 수 있게 해줍니다.
- Q2: RouterOutlet과 RouterLink의 역할은 무엇인가요?
A2: RouterOutlet은 현재 활성화된 경로에 맞는 컴포넌트를 표시할 위치를 지정하고, RouterLink는 클릭 시 해당 경로로 이동하게 해주는 지시자입니다.
- Q3: 기본 경로를 설정하려면 어떻게 해야 하나요?
A3: 기본 경로를 설정하려면 { path: '', redirectTo: '/home', pathMatch: 'full' }와 같이 redirectTo 속성을 사용해 특정 경로로 리다이렉트할 수 있습니다.
관련 태그
- #angular-라우팅
- #angular-16
- #페이지-전환
- #routerlink
- #spa
이 글을 통해 Angular 16에서 라우팅을 설정하고 페이지 간 전환을 구현하는 방법을 익힐 수 있기를 바랍니다.