화면 이동시 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) 새로운 페이지에 로케일을 표시합니다.
'WEB > NextJS' 카테고리의 다른 글
| NextJS - 동적 라우트 설정하기 (0) | 2023.05.18 |
|---|---|
| NextJS - getServerSideProps 사용법 (0) | 2023.05.17 |
| NextJS - redirects, rewrites 설정하기(요청url 마스킹, next.config.js설정) (0) | 2023.05.17 |
| NestJS - NextJS를 사용하는 이유?! (0) | 2023.05.16 |
