angular router 하는 방법

기본적으로 routing 하는 방법이 아닌 협업으로 해서 페이지 구분해서 진행시 구분하는 방법 기준으로 설명하겠습니다. 
 
폴더 구조 app>main>test 
 
appRouting - main을 loadChildren으로 해서 자식 모듈로 가지고 와서 app module import 진행 
mainRouting - 기본적으로는 main을 '/'으로 설정합니다. 보통 header 및 sidemenu 구성이 되는 페이지입니다. 
testRouting - main html에 router-oulet에 설정되어서 path에따라 페이지 변하게 되는 구간이 되는 router입니다. 

---

ts 영역 설명

 
1. main component를 생성합니다. ng g c main 으로 terminal에서 진행하시면 됩니다.
2. main component 폴더에 오른쪽 클릭 후 generate route를 클릭해서 main routing을 추가합니다. 
3. app-routing.module.ts에 해당 main module을 loadChildren에 설정합니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./main/main.module').then((m) => m.MainModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

4. app.module.ts에 AppRoutingModule이 제대로 import해서 @NgModule에 imports 설정되어 있는지 확인합니다. 
설명) import를 하지 않으면 내부적으로 AppRoutingModule을 사용할 수 없습니다. 
5. test component 생성하고 그 폴더를 오른쪽 클릭 후 generate route를 클릭해서 test routing을 추가합니다. 
6. main.routing.ts에서 app routing 설정할 때랑 동일한 방법으로 하고 메인 페이지를 path ''설정하고 변하는 구간을 test로 설정할 것이기 때문에 loadChildren path 설정하시면 됩니다. 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main.component';
const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      // test
      {
        path: 'test',
        loadChildren: () =>
          import('../test/test.module').then((m) => m.TestModule),
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class MainRoutingModule {}

7. main.module.ts에 MainRoutingModule을 import하고 @NgModule imports에도 설정합니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main.component';
import { MainRoutingModule } from './main.routing';
@NgModule({
  declarations: [MainComponent],
  imports: [CommonModule, MainRoutingModule],
})
export class MainModule {}

8.test.routing.ts에 path에 따라 이동할 수 있게 설정합니다.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';
import { Test1Component } from './test1/test1.component';
import { Test2Component } from './test2/test2.component';
const routes: Routes = [
  {
    path: '',
    component: TestComponent,
  },
  {
    path: 'test1',
    component: Test1Component,
  },
  {
    path: 'test2',
    component: Test2Component,
  },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TestRoutingModule {}

추가 설명)
1. test1, test2 는 임의로 이해를 돕기 위한 것임으로 실제 component만 만드시면 활용할 수 있습니다. 
2. test라는 폴더안에 test1, test2 component를 추가해서 페이지에 따라 path를 구분할 수 있습니다. 
 
9. test.module.ts도 main.module.ts와 마찬가지로 import 설정하고 연결해줍니다. 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestRoutingModule } from './test.routing';
import { TestComponent } from './test.component';
import { Test1Component } from './test1/test1.component';
import { Test2Component } from './test2/test2.component';
@NgModule({
  declarations: [TestComponent, Test1Component, Test2Component],
  imports: [CommonModule, TestRoutingModule],
})
export class TestModule {}

---

html 영역 설명

 
1. app.component.html

<router-outlet></router-outlet>

추가 설명) 현재 app routing에 연결된 것은 main html임으로 main routing에 path가 ''으로 설정된 main.component.html로 이동합니다. 
 
2. main.component.html 

<nav>
  <a routerLink="test">test 시작</a>
</nav>
<router-outlet></router-outlet>

추가 설명) routerLink가 있어야 router에 설정한 path에 html을 불러올 수 있고 view되는 구간은 router-oulet 부분이 됩니다. 즉 test 시작 클릭시 test.component.html이 나오게 됩니다. 
 
3. test.component.html 

<p>Home Test 확인</p>
<nav>
  <a routerLink="test1">Test1</a>
  <a routerLink="test2">test2</a>
</nav>
<router-outlet></router-outlet>

추가 설명) main.component.html에 router-outlet 테그안에 test.component.html이 나오게 됩니다. 
마찬가지로 routerLink path에 따라 설정한 html은 router-outlet에 나오게 됩니다. 
 
느낀점 
react로 할 때에는 App.js에 route를 다 설정하고

import { React} from "react";
import SideMenu from '../../Components/SideMenu';
import UserList from "./_UserList";
import Header from "../../Header/Header";
import "../../css/Main.scss";
function Main() {

  return (
    <div className="main-layout">
      <SideMenu/>
      <div className="main-form">
        <Header/>
        <UserList/>
      </div>
    </div>
  );
}

export default Main;

이런식으로 설정해서 UserList 부분만 route에 따라서 이동할 수 있는데 꼭 routerlink를 사용하지 않아도 경로만 바꾸면 이동될 수 있었습니다. 그런데 angular는 기능마다 구분이 되어있고 module, routing, html이 구분되어있고 폴더마다 구분해서 사용하다보니 다소 번거로운 부분이 있었습니다. 현재 회사에서 angular로 하라고하니깐 하긴 하지만 react가 가장 프론트엔드가 사용하기에 좋고 트랜디하다는 것은 변함이 없습니다.