메가테라 프론트엔드 생존코스 7주차 회고

벌써 7주차라니 믿기지 않는다.

시간이 너무 잘 간다.

 

이번 주에는 React Router에 대해 배우는 시간이었다.

처음엔 Vue에서 사용하는 Router와 많이 다를 것 같단 생각을 했는데 아니었다.

기본 개념과 동작방식이 매우 유사했다.

그래서인지 이해하는데 어려움이 없었다.

 

다만 Vue는 Vue 인스턴스에 라우터를 옵션으로 전달, React는 라우터 컴포넌트를 애플리케이션의 루트에 넣어서 사용하는 차이점이 있었다.

 

router를 설치할 때는 개발용으로만 쓰이는 것이 아니므로 아래와 같이 입력하여 설치하면 된다.

npm i react-router-dom

 

 

사용 예제 아래 참고

// React Router 예제
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

// Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

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

 

React Hook을 잘 활용하면 Vue Router처럼도 코드 작성도 가능하다.

개인적으로 Vue처럼 사용하는 것이 코드가 더 보기 편하기 때문에 라우터만 따로 분리하는 방식으로 사용하게 될 것 같다.