[JavaScript 문법] 49일차: 라우팅 설정

라우팅이란?

라우팅은 사용자가 애플리케이션 내에서 다양한 페이지나 뷰로 이동할 수 있도록 하는 기술입니다. 싱글 페이지 애플리케이션(SPA)에서 라우팅을 통해 사용자는 페이지 전체를 새로 고침하지 않고도 콘텐츠를 탐색할 수 있습니다.

React Router 설정 및 사용법

React Router 설치

React 애플리케이션에서 라우팅을 사용하려면 React Router 패키지를 설치해야 합니다.

npm install react-router-dom

React Router 설정

React Router를 사용하여 라우팅을 설정하고, BrowserRouter, Route, Switch 컴포넌트를 사용합니다.

예제: React Router 설정

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

// Home.js
import React from 'react';

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

export default Home;

// About.js
import React from 'react';

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

export default About;

Vue Router 설정 및 사용법

Vue Router 설치

Vue 애플리케이션에서 라우팅을 사용하려면 Vue Router 패키지를 설치해야 합니다.

npm install vue-router

Vue Router 설정

Vue Router를 사용하여 라우팅을 설정하고, router-view 및 router-link 컴포넌트를 사용합니다.

예제: Vue Router 설정

// main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.config.productionTip = false;

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

<!-- 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>

<!-- Home.vue -->
<template>
  <h2>Home</h2>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<!-- About.vue -->
<template>
  <h2>About</h2>
</template>

<script>
export default {
  name: 'About'
};
</script>

Angular Router 설정 및 사용법

Angular Router 설치

Angular CLI를 사용하여 Angular 애플리케이션을 생성하면 기본적으로 Angular Router가 포함됩니다.

Angular Router 설정

Angular Router를 사용하여 라우팅을 설정하고, RouterModule, Routes를 사용합니다.

예제: Angular Router 설정

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

// app.component.html
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<h2>Home</h2>'
})
export class HomeComponent { }

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '<h2>About</h2>'
})
export class AboutComponent { }

결론

라우팅은 싱글 페이지 애플리케이션에서 사용자가 다양한 페이지나 뷰로 이동할 수 있도록 하는 중요한 기술입니다. 이번 글에서는 React Router, Vue Router, Angular Router 설정 및 사용법에 대해 배웠습니다. 다음 글에서는 최종 프로젝트에 대해 알아보겠습니다.

다음 글에서 만나요!