[React] React - Next Router vs React Router

 먼저 모든 코드에 의미를 담고서 이야기 해보면

Next 프레임워크와 React 프레임워크를 사용하면서 두 가지 차이점에 대해 궁금증이 생길것이다.

React.js는 많은 스타트업 및 대기업에서 프론트엔드 프레임워크로 사용하고 있는데 

Next.js는 사실상 React.js와 많이 다르면서 취업하는데 있어 다른 개발자들에 비해 이점을 가져가지 못할 수 있다.

 

결론은 Next.js는 React.js를 감싸고 있는 프레임워크로 보면된다. React의 기능들을 그대로 가지고 있으면서 
Next.js에서만 구현할 수 있는 추가 기능들이 존재해 오히려 React보다 좀 더 배울만한 
것이 많다고 볼 수 있다.

그런데, Next.js와 React에서 차이가 유일하게 크게 보이는 것은 바로 Router부분이다. 라우팅을 구현할때 

Next.에서는 상대적으로 쉽게하는 반면에 React.js에서는 상대적으로 경로 및 컴포넌트 설정에 있어 

Next.js보다 조금 더 복잡한 방식으로 이루어져있다.

 

React. Router Link vs Next Link

Next.js같은 경우 자바스크립트 a 태그 형식과 같은 태그라 보면 된다.

// React Link
import {Link} from 'react-router-dom'

export default function App() {
   return <Link to="/kimjungho"></Link
}

// Next.js Link
import Link from "next/link"

export default function App() {
  return (
    <Link href="/kimjungho">
      <a>about</a>
     </Link>
  )
}

Next.js같은 경우 원하는 a태그에 링크를 걸어서 href형식으로 주게된다. (Javascript형식과 비슷한 방식)

 

여기서 잠깐~!!!

그렇다면 Link와 Route는 큰차이가 존재하는가?

Link 방식은 SEO(search engine optimization) 즉 검색 최적화를 위해 많이 사용되고 Routing은 그외에 함수들을 실행 시킬때 많이 사용된다.

 

무슨뜻일까?

 

Link태그는 사용할 경우 자동적으로 다른 페이지로 넘어갈 때 많이 사용된다. 즉, 어떤 태그를 클릭해 다른 페이지로 

넘어갈 때 함수를 동작시키지 않고 그냥 페이지를 보여주면 되는 경우에는 Link를 사용하는 것이 

좀더 효율적이고 실무에서 많이 사용하는 방식이라 한다.

 

결국 Routing을 사용하게 되면 클릭이벤트가 발생할때 어떤 함수들이 실행되는지에 따라 다른 회사들에서는 

모르니 SEO를 사용할때는 주소가 나와있는 Link href=""를 많이 사용하게 된다.

 

반대로 라우팅 같은 경우는 함수를 동작시켜서 클라이언트에서 데이터를 request(요청) & response(응답)을 할때

등으로 자동으로 페이지를 넘기지 않을 경우 router:push & replace를 사용한다고 보면 된다.

 

이제 넘어가서 이제는 React-router vs Next-router에 대해 살펴보자.

import {BrowserRouter as Router, Routes, Route} from "react-router-dom"

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

Next.js 에서 실행하는 방식은 굉장히 간단한 방식이다.

const result = await createBoard({
   variables: {
      headWriter: boardWritePackage.headWriter,
      headPassword: boardWritePackage.headPassword,
      headTitle: boardWritePackage.headTitle,
      headContent: boardWritePackage.headContent
   }
})  
   const message = "입력이 완료되었습니다."
   alert(message);
   const id_val = result.data.createBoard._id
   router.push(`/board/detailwrite/${id_val}`);
   } catch(err) {
      alert(err.message);
   }

router.push를 만들고 타입스크립트 혹은 자바스크립트 파일명을 그대로 써주면 그 페이지가 주소가 되는 구조를 볼 수 있다.

 

라우팅 면에서 확실히 next.js가 편하다. 하지만 많은 스타트업에서 React.js를 쓰고 있어 설령 next.js를 공부한 사람이라도 정확히 알면 좋은 정보이다.

 

또한. React.js같은 경우 Nested Routes를 설정할때 ``를 이용한 {match.path}:slug` 를 직접 설정해 줘야하는데

 

Next.js에서는 파일면 [] 대괄호하고 동적 라우팅을 해주고 그 주소로 router.push를 하면 nested routes가 완성된다.

 

라우팅 측면에서는 굉장히 효율적인 방식이라 볼 수 있다.

 

참고 링크

React- Next Router vs React Router