* 글을 쓰게 된 원인
(https://velog.io/@131ryuji/redux-saga-redux-toolkit-%EA%B4%80%EB%A0%A8-%EC%98%A4%EB%A5%98%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%B6%80%EB%B6%84)
▶ 블로그 내용 중 해결된 문제 next/router에 대해 좀 더 알아보고자 글 작성
▶ 공식문서에서 router를 이해 후 next/router를 넘어갈 것을 권장
//수정 전(문제는 없으나 공식문서대로 따라가려고 함)
import { Router } from "next/router";
const SuccessSignup = () => {
const onMain = () => {
Router.push("/");
};
const onLogin = () => {
Router.push("/signin");
};
//수정 후
import { useRouter } from "next/router";
const SuccessSignup = () => {
const router = useRouter();
const onMain = () => {
router.push("/");
};
const onLogin = () => {
router.push("/signin");
};* Next.js 공식문서 내 Router
(https://nextjs.org/docs/routing/introduction#nested-routes)
-
Routing : 페이지 기반으로 움직임, pages 폴더 안에 파일을 넣으면 자동으로 route가 됨(이 부분이 node.js만 사용했을 때 router를 넣지 않고 바로 되서 편리했음)
-
index.js로 넘어갈 때 index.js가 아닌 "/"를 붙이면 됨
-
Nested routes : 중첩 파일 지원(nested files), 폴더가 중첩적일 때 (여러 개로 쌓여 있을 때) 알아서 지원한다는 뜻
-
Dynamic route segments : 매개변수를 이용해 routing 사용 시 대괄호 사용 대신 :나 / 이용 가능
* next/router
(공식 문서 : https://nextjs.org/docs/api-reference/next/router)
(router.push, relace 자세한 설명 : https://velog.io/@khy226/Next.js-Router-%EC%A0%95%EB%A6%AC)
1. useRouter : 함수 컴포넌트 안에 router 객체 접근 시 useRouter 사용
▶ 예시에서 onClick에 사용될 함수의 주소 이동을 위해 사용
2. 사용 방법
▶ router.push, rotuer.replace, router.prefetch 등등 존재
3. router.push
▶ client-side 전환을 할 수 있도록 도와주고 Next/link 대신 사용
▶ 리우터 히스토리 스택에 새로운 url 쌓아줌
▶ home > login > main > item 이동 시 item으로 이동하려한다면 home > login > main > item 순으로 히스토리 스택이 쌓임, item에서 뒤로가기 버튼 누르면 main으로 이동
▶ 외부 url은 적합하지 않음(a 태그의 target="_black"나 window.location 권장)
4. router.replace
▶ router.push와 비슷하나, 라우터 히스토리 스택에 새로운 url 추가하지 않음, 기존에 있던 현재 페이지 router를 새로운 url로 대체
▶ home > login > main 순으로 이동 시 item으로 이동하려 하면 home > login > main > item이 아닌 home > login > item 순, item에서 뒤로가기 버튼 누르면 login으로 돌아감
5. router.back
▶ 히스토리 전단계로 이동(window.history.back() 과 같은 역할)
* router.push 와 router.replace 차이점
▶ router.push : 라우터 history 스택 제일 위에 새로운 url을 쌓는 것 (이전 라우팅 히스토리 모두 유지 원함)
▶ router.replace : 스택 제일 위의 페이지를 새로운 url로 바꿈
(현재 라우팅 히스토리를 다른 url로 변경 원함)
ex) 로그인 후 마이 페이지 이동 시 back 버튼 누르면 다시 로그인 페이지로 가지 않게 하기 위함
* Next/Link
▶ a tag 대신 Link 컴포너트 사용
▶ 클라이언트 서버 사이드 네비게이션(Client-side navigation) 가능
▶ 페이지 전환 시 전체 페이지 로드하지 않음
▶ Link 태그 대신 a 태그 사용 시, 브라우저가 전체 새로고침을 하기 때문에 라우터 히스토리 스택이 쌓이지 않음(이제 전 포스팅의 문제점)
* Client-side navigation
▶ 페이지 전환이 javascript로 이루어짐
▶ 기존 navigation보다 훨씬 빠르게 동작하며, 리액트의 sing page Application 특성 유지하며 페이지 전환됨
* Code splitting & Prefetching
▶ React 빌드, 배포 시 모든 파일들(js, css)이 하나의 파일로 번들링되면 엄청나게 큰 파일 됨 → 따로 webpack 설정하지 않으면 성능에 문제 있음
▶ 해결책 : 코드 스플리팅(Code splitting)
ex) /main, /about, /post 페이지 존재 시 /main에 들어가는 동안 /about이나 /post는 사용자에게 불필요. 필요한 파일만 불러올 수 있다면 로딩이 빠르고 트래픽이 줄어듦
▶ Next.js는 자동으로 코드 스플리팅 해줌, 각 페이지에 필요한 항목만 로드됨
▶ Next.js의 프로덕션 빌드에서 Link 태그 요소가 브라우저에 나타날 때 Next.js는 백그라운드에서 연결된 페이지의 코드를 자동으로 prefetch함
링크 클릭 시 해당 링크와 연결된 페이지의 코드가 이미 백그라운드에 로드되어, 즉시 페이지 전환이 이루어짐
