[Angular] Router에 대해 알아보기 (feat. 화면이동)

 

안녕하세요 Foma 💻 입니다!

 

오늘은 Angular에서 화면을 이동하는 방법인 Router에 대해 다뤄보려고 합니다.

 

바로 시작할게요~

---

프로젝트 설정

 

프로젝트 생성 시에 "Would you like to Angular routing?(너 앵귤러 라우팅 사용할거야?)" 라고 묻는데,

 

여기서 y를 해줍니다.

 

 

login(로그인) 화면을 만들어 줍니다.

 

ng g c pages/login

 

register(회원가입) 화면을 만들어 줍니다.

 

ng g c pages/register

 

app-routing.modules.ts

 

Routes에 원하는 endPoint와 component(화면)들을 세팅해줍니다.

 

const routes: Routes = [
  {  path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
];

 

화면을 확인하기 위해서 앵귤러 프로젝트를 실행시켜 봅니다.

 

ng serve

---

기본 라우팅 설정

 

이렇게 하면 아래와 같이 기본으로 설정된 app.component.html의 화면이 나올거에요.

 

 

app.component.html

 

그렇다면 기본 화면 라우팅 설정은 어떻게 할까요?

 

우선 app.component.html 코드를 모두 지우고 아래와 같이 작성해 줍니다.

 

아래 뜻은 기본으로 뜨는 화면을 router에 맞게 띄울거야 라는 뜻입니다.

 

(기본으로 뜨는 화면은 endPoint가 '' 아무것도 없는 화면 ex) http://localhost:4200을 뜻합니다.)

 

<div class="container">
  <router-outlet></router-outlet>
</div>

 

app-routing.modules.ts

 

그렇다면 Routes에 endPoint가 없을 때 기본 화면을 설정해 줘야겠죠?

 

아래와 같이 login 화면을 기본으로 시작되도록 설정해 줍니다.

 

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
	...
];

 

이렇게 하면 http://localhost:4200로 이동하면 자동으로 login 화면으로 리다이렉트 되어 로그인 화면이 기본 화면으로 보여집니다.

 

---

화면 이동하기

 

login.component.html

 

register로 이동하기 위한 버튼을 하나 만들어 줍니다.

 

<div class="container">
    <button (click)="login()" class="route-button"> Go to Register </button>
</div>

---

login.component.ts

 

Router를 import 해주고,

 

import { Router } from '@angular/router';

 

생성자에 router를 만들어 줍니다.

 

 constructor(private router:Router) { }

 

login 메서드에 이동할 화면(register)로 navigate 해줍니다.

 

  login() {
    this.router.navigate(['/register'])
  }

---

login.component.css (Optional)

 

버튼 위치랑, 디자인 하고 싶은 분들은 아래 코드를 추가해 주시면 됩니다.

 

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.route-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    text-decoration: none;
    color: white;
    border: white solid 0.2rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    width: 15rem;
    padding: 1.5rem;
    background-color: rgb(55, 55, 55);
  }

---

Test

 

아래와 같이 Go to register 버튼을 누르면

아래와 같이 register 화면으로 이동되게 됩니다.

 

---

이전 화면으로 되돌아 가기

 

지금 작성하는 프로젝트의 경우 Login과 Register 밖에 없어서 이전 화면이 어딘지 정확히 알 수 있지만,

 

화면이 많아지고, 기능이 많아질수록 이전 화면이 어딘지 적는 것은 꽤 까다로운 일입니다.

 

고로 이동한 바로 이전의 화면으로 되돌아 가는 방법을 알아야 하는데요.

 

register.component.html

 

Login 화면과 같이 버튼을 만들어 줍니다.

 

<div class="container">
    <button (click)="back()" class="route-button"> Back to Previous</button>
</div>

---

register.component.ts

 

Login 화면과 같이 router 설정을 해준 뒤 아래와 같이 '..' 으로 endPoint를 설정해 줍니다.

 

  back() {
    this.router.navigate(['\..']);
  }

 

이렇게 하면 아래와 같이 Back 버튼을 누르면 Login 화면으로 이동되는 것을 볼 수 있습니다.