Next Router vs React Router

Next 프레임워크와 React 프레임워크를 사용하면서 두 가지 차이점에 대해 궁금증이 생길 것이다.
React.js는 많은 스타트업 및 대기업에서 프론트엔드 프레임워크로 사용하고 있는데, 
Next.js는 사실상 React.js와 많이 다르면서 취업하는데 있어 다른 개발자들에 비해 이점을 가져가지 못할 수 있다.

Next.js와 React에서 차이가 유일하게 크게 보이는 것은 바로 Router부분이다. 라우팅을 구현할때 
Next.에서는 상대적으로 쉽게하는 반면에 React.js에서는 상대적으로 경로 및 컴포넌트 설정에 있어 
Next.js보다 조금 더 복잡한 방식으로 이루어져있다.

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>
  )
}

Link태그는 사용할 경우 자동적으로 다른 페이지로 넘어갈 때 많이 사용된다. 즉, 어떤 태그를 클릭해 다른 페이지로 
넘어갈 때 함수를 동작시키지 않고 그냥 페이지를 보여주면 되는 경우에는 Link를 사용하는 것이 
좀더 효율적이고 실무에서 많이 사용하는 방식이라 한다.

결국 Routing을 사용하게 되면 클릭이벤트가 발생할때 어떤 함수들이 실행되는지에 따라 다른 회사들에서는 
모르니 SEO를 사용할때는 주소가 나와있는 Link href=""를 많이 사용하게 된다.

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

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를 공부한 사람이라도 정확히 알면 좋은 정보이다.

출처: https://koras02.tistory.com/145 [Koras02코딩웹:티스토리]