NextJS - useRouter.push(), Link 파헤치기

화면 이동시 next의 Link컴포넌트를 사용하거나 useRouter hook을 사용할 수 있습니다.

이 둘은 사용법이 매우 비슷한데 아래와 같이 사용할 수 있습니다.

 

페이지 전환처리

- Link

import Link from "next/link";

export default function Home(){
    return <Link href="/about">이동</Link>;
}

Link를 사용하게 되면 화면 전환시 쉽게 처리가 가능합니다. 

 

- useRouter

import { useRouter } from "next/router";

export default function Home({results}:IHome){
    const router = useRouter();
    const onClick = (url:string) => {
        router.push(url);
    }
    return (
        <div className="container">
        	<h1>useRouter 예시</h1>
            <div onClick={() => onClick("/about")}>이동</div>
        </div>
    );
}

부득이하게 함수를 통해 페이지 이동을 처리해야 한다면 useRouter의 push메소드를 사용하여 전환 처리를 할 수 있습니다.

 

화면 전환시 사용할 수 있는 useRouter hook과 Link컴포넌트는 비슷한 옵션을 가지고 사용법도 비슷합니다.

아래서 옵션과 사용법을 알아보겠습니다.

 

Link props

<Link href={`/movies/${id}`}>

href :
필수 props입니다.

String | Object형식의 데이터를 받습니다.

String의 경우 문자열로 이동 처리할 경로를 작성합니다.

Object를 받는 경우 pathname, query의 속성을 사용할 수 있습니다.

<Link
    href={{
        pathname: '/about',
        query: { name: 'test' },
    }}
>
    About us
</Link>

• pathname: 이동할 경로입니다.
• query: 추가로 전달할 값을 작성할 수 있습니다.
  위의 예제의 경우 /about?name=test 의 형태로 화면 전환이 이루어집니다.

 

 

as?: 선택 props로 사용하게 되면 url정보를 마스킹처리할 가짜 url로 작성시켜 줍니다.

<Link 
	href={{ pathname: '/about/[id]', query: { title: "공지사항입니다." } }} 
	as="/about/[id]"
>Profile</Link>

"/about/123456&title=공지사항입니다."

위의 url로 변경될 때, 해당 정보를 마스킹하고, "/about/123456"으로 처리하면서 동일한 효과를 줄 수 있다.

 

useRouter.push options

import { useRouter } from 'next/router';
function ActiveLink({ children, href }) {
	const router = useRouter();
	router.push(url, as, options);
}

push에는 url 필수값과 as, options라는 선택 파라미터를 받습니다.

 

url:

필수 파라미터입니다.

String | Object를 받으며 String은 화면 전환 url을 입력합니다.

Object에는 Link와 사용법이 비슷합니다.

{
    pathname: '/about/detail',
    query: {
        page: 1,
        title: '제목입니다.',
    }
 }

• pathname: 이동할 경로
• query: 전환시 넘겨줄 파라미터 정보입니다.

 

as?:

선택값입니다.

사용하게 되면 사용자의 url을 마스킹 처리할 수 있습니다.

router.push({
    pathname: `/movies/${id}`,
    query: {
        title
    }
}, `/movies/${id}`);

"/movies/1234?title='제목입니다'"

-> 

"/movies/1234"로 마스킹처리하여 동일한 기능을 수행합니다.

 

 

options?:

선택값입니다. (Object)

scroll: (boolean: default @true)탐색 후 페이지 맨 위로 스크롤 제어 옵션입니다.

shallow getStaticProps: (boolean: default @false)재실행 없이 현재 페이의 경로를 업데이트합니다.

locale: (String) 새로운 페이지에 로케일을 표시합니다.