React-Router vs Next-Router

React-Router vs Next-Router

• Next.js는 React를 감싸고 있는 프레임워크이다.
• React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있어서 오히려 더 배운다고 생각하면 된다.
• 하지만, Next.js와 React에서 차이를 유일하게 크게 보이는 곳이 Router 부분이다.
• 라우팅을 할 때 Next에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.

 

 

---

React Link vs Next Link

• Next-js 같은 경우는 자바스크립트 a 태그 형식과 거의 같다고 보면 된다.

 

	// React Link
	import {Link} from "react-router-dom";
	export default function App(){
	return <Link to = '/taewoongmoon'></Link>
	}
	// Next.js Link
	import Link from "next/Link";
	export default function App(){
	return (
	<Link href = "/taewoongmoon">
	<a>about</a>
	</Link>

view raw Link.js hosted with ❤ by GitHub

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

view raw routing.js hosted with ❤ by GitHub

 

	const result = await createBoard({
	variables: {
	writer: writer,
	password: password,
	title: title,
	contents: contents,
	}
	})
	const message = "입력을 완료하였습니다.";
	alert(message);
	const id_val = result.data.createBoard._id;
	router.push(`/board/detail/${id_val}`);
	} catch(error) {
	alert(error.message);
	}

view raw NextJSrouting.js hosted with ❤ by GitHub

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

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

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