프론트엔드에서 많이 사용하는 프레임워크 중 Next와 React 프레임워크다.
따로따로 사용할 수도 있는데 둘을 같이 사용하는 것이 사용할 수 있는 기능면에서 훨씬 이점이 있다.
같이 사용할 때는 Next가 React를 감싸고 있다고 생각하면 됨.
둘이 같은 기능을 가지고 있지만 가장 차이가 크게 보이는 부분이 바로 router부분이다.
라우팅을 구현할 때 Next에서는 쉽게하는 반면에 React에서는 경로 및 컴포넌트 설정등에 있어서 조금 더 복잡한 면이 있음.
React-router
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>위 코드처럼 같이 감싸줘야하는 태그가 있고, 이를 Switch를 이용해 조건을 만족시켜 페이지를 이동시켜줌.
NextJS도 살펴보자.
NextJs
import { useRouter } from "next/router"; //next에서 제공해주는 useRouter임포트 해오기
export default function NextRouterPage() {
const router = useRouter();
const onClickMoveToPage = () => {
// 할당된 변수안에 있는 기능 중 하나인 push를 가지고 와 경로를 지정
router.push('/')
}위와 같이 router.push기능이 들어있는 함수만 바인딩 시켜주면 지정해준 경로로 이동할 수 있게 된다.
왜 Link 태그를 사용하지 않았을까?
Link와 Route의 차이점을 살펴보자
<Link와 Route의 차이점>
Link는 SEO, 즉 검색 엔진 최적화를 위하여 많이 사용되고 라우팅은 그 외 함수를 실행시킬 때 많이 사용 됨.
Link태그를 사용하는 경우는 어떠한 함수를 실행시키지 않고 그냥 페이지만 이동되는 경우 사용하는 것이 훨씬 효율적이고 실무에서 많이 사용한다.
라우팅과 함수를 실행해 어떠한 데이터를 요청 또는 등록하고 자동으로 페이지가 넘어가지 않는 경우 사용하면 된다고 알고 있으면 된다.
