[JavaScript 프레임워크] 6일차: JavaScript 프레임워크에서 라우팅 설정하기

6. 라우팅 설정

프로젝트 개요

이번 글에서는 React, Vue.js, Angular에서 라우팅을 설정하는 방법에 대해 알아보겠습니다. 라우팅은 애플리케이션 내에서 서로 다른 페이지나 컴포넌트로의 네비게이션을 관리하는 기능을 제공합니다.

---

React Router

React Router란 무엇인가?

React Router는 React 애플리케이션에서 라우팅을 구현하기 위한 라이브러리입니다. 페이지 간의 이동과 URL 관리를 쉽게 할 수 있도록 도와줍니다.

React Router 설치 및 기본 설정

1. React Router 설치

npm install react-router-dom

2. 기본 라우터 설정

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

3. 라우터 설정

App.js

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}

export default App;

---

Vue Router

Vue Router란 무엇인가?

Vue Router는 Vue.js 애플리케이션에서 라우팅을 구현하기 위한 공식 라우터 라이브러리입니다. 페이지 간의 이동과 URL 관리를 쉽게 할 수 있도록 도와줍니다.

Vue Router 설치 및 기본 설정

1. Vue Router 설치

npm install vue-router@next

2. 기본 라우터 설정

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

3. 라우터를 Vue 애플리케이션에 추가

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

4. 라우터 설정

src/App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 스타일 추가 */
</style>

---

Angular Router

Angular Router란 무엇인가?

Angular Router는 Angular 애플리케이션에서 라우팅을 구현하기 위한 공식 라우터 모듈입니다. 페이지 간의 이동과 URL 관리를 쉽게 할 수 있도록 도와줍니다.

Angular Router 설정 및 기본 설정

1. Angular Router 설정

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: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

2. 라우터를 Angular 애플리케이션에 추가

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 라우터 설정

app.component.html

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

4. 기본 컴포넌트 추가

home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<h2>Home</h2>',
  styles: ['h2 { color: #42b983; }']
})
export class HomeComponent {}

about.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '<h2>About</h2>',
  styles: ['h2 { color: #42b983; }']
})
export class AboutComponent {}

---

결론

React Router, Vue Router, Angular Router를 사용하여 각 프레임워크에서 라우팅을 설정하는 방법을 배웠습니다. 이를 통해 애플리케이션 내에서 페이지 간의 이동과 URL 관리를 쉽게 할 수 있습니다.

다음 글에서는 컴포넌트 재사용 및 테스트에 대해 알아보겠습니다. 다음 글에서 만나요!