useRouter()

 

---

useRouter란?

1. <a/> 태그나 <Link/> 태그처럼 페이지 이동하는 방법

2. 자바스크립트 문법을 사용하므로 client component에서 사용할 것.

import {useRouter} from 'next/navigation'

우선 import를 해준다.

=> 단 자동완성의 경우 next/router로 설정되는데, navigation으로 변경할 것.

let router = useRouter()

편하게 변수에 담아준 뒤,

<button onClick={()=>{ router.push('/') }}>버튼</button>

이벤트 처리를 위해 버튼태그에 onClick을 사용한다.

- push()는 경로로 이동을 하는 함수이다.

<button onClick={()=>{ router.back() }}>버튼</button>

- back()은 페이지 뒤로 가기 기능이다.

<button onClick={()=>{ router.forward() }}>버튼</button>

- forward() 물론 앞으로 가는 기능도 있다.

<button onClick={()=>{ router.refresh() }}>버튼</button>

- refresh() 처럼 새로고침 기능도 있는데, 조금 다른 게

- 웹 브라우저에서 새로고침을 하는 것처럼 아예 재로드를 하는 방식이 아니라,

이전과 비교하여 html을 필요한 부분만 재 랜더링하는 방식이다.

=> soft refresh 방식

<button onClick={()=>{ router.prefetch('/') }}>버튼</button>

- prefetch() 기능은 해당페이지를 미리 로드해 주는 기능으로써,

페이지를 방문할 때 빠르게 로드를 하기 위해 사용할 수 있다.

=> 정말 next.js의 SSR은 신세계 그 잡채.. html 랜더링 속도를 높이기 위해 많은 기능을 도입한 게 느껴진다.

<Link href={'/'}>링크</Link>

Link 컴포넌트도 사실 prefetch기능이 존재한다.

=> server component에서도 사용할 수 있어서 더 자주 사용할 것 같다.

<Link href={'/'} prefetch={false}>링크</Link>

prefetch props가 따로 있으며 on/off를 상황에 맞게 사용할 수 있다.

=> 내 생각엔 스크롤 DOM 형식에 사용하면 스크롤을 내리기 전에 보이지 않는 게시글은 false로 설정하고,

스크롤을 내리면 DOM에 있던 게시글이 보이면서 true로 설정하는 알고리즘을 짠다면

낭비를 줄이고 페이지 로드도 빠르고 일석이조를 가져갈 수 있을 것 같다!

---

이제 슬슬 client/ server component 방식이 적응이 되고 있는 것 같다.

어디서 사용할 함수인지가 눈에 보이는 느낌?

역시 새로운 언어를 공부할 때는 먼저 게시판을 만드는 게 가장 가성비가 좋고 합리적인 것 같다.