Next vs React

Next와 React의 차이가 무엇일까?

쉽게 말해 Next.js는 React를 감싸고 있는 프레임워크이다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있다.

그 중에서도 큰 차이점이 들어나는 기능이 Router이다.
라우팅을 할 때 Next에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.

React Router

//react routing
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>

Next router

import {useRouter} from 'next/router'

export default function StaticRoutingPage() {
    const router = useRouter()

    const onClickMove = () => {
        router.push('/05-02-static-routed')

    }


    return <button onClick={onClickMove}>페이지 이동하기</button>

라우터를 정의해준뒤 라우터명.push(주소)만 해주면 해당 주소로 라우팅 된다. Next.js에서는 파일명 []대괄호하고 동적 라우팅을 해주고 그 주소로 route.push를 하는 방식으로 쉽게 동적 라우팅을 구현할 수 있다.

// 파일명 [number]
router.push(`/quiz/06-02-container-presenter/${result.data.createBoard.number}`);

클릭한 게시판의 주소가 ${result.data.createBoard.number}에 들어가면서 동적 라우팅이 구현된다.