React-router vs Next-router

React vs Next.js

React는 구성 요소를 빌딩 블록으로 사용하여 사용자 인터페이스를 구축하는 데 도움이 되는 JavaScript 라이브러리임.
Next.js는 웹 앱을 빌드하기 위해 함께 작동하는 일련의 라이브러리가 있는 프레임워크이며 이러한 라이브러리 중 하나가 React

라이브러리

라이브러리는 앱의 특정 문제를 해결하기 위한 것이다.

예를 들어
라우팅
날짜 관리
데이터 변환

프레임워크

웹 앱을 개발하는 데 사용하는 모든 것이 될 수 있다. 일반적으로 완벽하게 작동하는 앱을 빌드하는 데 도움이 되도록 일부 독선적인 방식으로 함께 작동하는 라이브러리 모음이다.

React-router

는 경로 및 컴포넌트 설정에 있어 Next-router보다 조금 더 복잡한 방식으로 이루어져 있다.

아래는 React 사용되는 방식이다

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

export default function App() {
    <Router>
        <Routes> 
            <Route exact path = "/kingmo"/>
            <Route exact path = "/" /> // index.js
            <Route exact path = "/kingmo" />
            <Route exact path = "" />
        </Routes>
    </Router>
}

React Router는 Routes안에 있는 여러가지 Router중에서 조건에 만족한 첫번째 Router를 불러온다.

Next.js

const async = () => {
    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}`)
}

Next에서 사용하는 방식은 router.push를 만들고 파일명을 그대로 써주면 그 페이지가 주소가 되는 직관적인 구조를 가지고 있는 것을 볼 수 있다.