React-router vs Next-router

먼저 프론트엔드에서 많이 사용하는 프레임워크가 있다.
Next 와 React 프레임워크이다.
둘이 따로 사용하는 경우도 있지만, 둘을 같이 사용하는 것이 사용할 수 있는 기능면에서 이점이 있다.

같이 사용할 때는 Next가 React를 감싸고 있다고 생각하면 된다.
이때 둘이 같은 기능을 가지고 있지만 차이가 크게 보이는 부분이 바로 Router 부분이다.
라우팅을 구현할 때 Next에서는 상대적으로 쉽게 하는 반면에 React에서는 상대적으로 경로 및 컴포넌트 설정에 있어 조금 더 복잡한 면이 있다.

React-router

먼저 React에서의 라우팅을 살펴보자.

import {BrowseRouter as Router, Switch, Route} from 'react-router-dom'

export default function App(){
<Router> //일단 라우팅 되는 부분을 감싸준다
      <Switch> //Switch는 안에있는 여러가지 Router중에서 조건에 만족하는 첫번째 Router를 불러온다.
      	<Route exact path = "/taewoongmoon"/ >
      	<Route exact path = "/" /> // 이렇게 / 하나만 쓰면 index.js 메인페이지를 불러온다.
        <Route exact path = "/iwanttogohome" />
      	<Route exact path = "" />
          
      </Switch>
</Router>

위와 같이 감싸줘야하는 태그가 있고, 이를 Switch를 이용해 조건을 만족시켜 페이지를 이동시켜준다.

반면에 Next에서의 라우팅은 조금 더 간단하다.

Next-router

// 먼저 next에서 제공해주는 useHooks 를 임폴트
import { useRouter } from "next/router";

export default function NextRouterPage() {
  // 훅을 변수에 할당
  const router = useRouter();
    
  const onClickMoveToPage = () => {
    // 할당된 변수안에 있는 기능 중 하나인 push를 가지고 와 경로를 지정
    router.push('/')
}

위에 onClickMoveToPage 함수를 바인딩만 시켜주면 이제 자기가 지정해준 경로로 갈 수 있게 된다.
위에 코드와 같이 조금 더 간편하게 라우팅을 할 수 있게 된다.

그렇다면 여기서 의문이다.
왜 Link 태그를 사용하지 않고 Route를 사용하는 것인가?

Link 와 Route의 차이점

Link는 SEO(Search Engine Optimization), 즉 검색 엔진 최적화를 위하여 많이 사용되고 라우팅은 그 외에 함수를 실행시킬 때 많이 사용된다.

Link 태그를 사용하는 경우는 어떠한 함수를 실행시키지 않고 그냥 페이지만 이동 되는 경우에 사용하는 것이 훨씬 효율적이고 실무에서 많이들 쓴다고 한다.

라우팅과 함수를 실행하여 어떠한 데이터를 요청 또는 등록하고 자동으로 페이지가 넘어가지 않는 경우에 사용한다고 생각하면 된다.

출처 : moony_moon.log