Link & useRouter()
-
React의 Link 컴포넌트를 이용해 클라이언트 사이드에서 이동함.
-
Link에 url object도 사용가능함 => 템플릿 리터럴 형태로 변수를 넣어줄 수도 있지만, URL object를 사용하면 명확하게 전달가능함.
-
URL OBJECT의 장점 => 어느경로로 매핑되는지 직관적으로 파악가능함. & query 프로퍼티를 사용하여 쿼리파라미터를 객체형태로 전달 가능함.
import Link from 'next/link'
function Posts({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={`/blog/${encodeURIComponent(post.slug)}`}>
{post.title}
</Link> //템플릿리터럴을 사용해 변수를 넣은 경우.
<Link
href={{
pathname: '/blog/[slug]',
query: { slug: post.slug },
}}
>
{post.title}
</Link> // URL Object를 전달한 경우
</li>
))}
</ul>
)
}
export default Posts- 받는쪽에서는 useRouter()훅에서 query객체를 사용함. 이 훅을 사용해 라우터객체에 접근가능함.
export default function TodoListId() {
const router = useRouter();
const { id } = router.query;
return (
<main
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
>
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<div>todoList + id</div>
<div>id = {id}</div>
</div>
</main>
);
}
- Link태그가 아니라 useRouter를 이용해 버튼의 이벤트핸들러로도 페이지 이동가능 (useNavigate와 동일)
import { useRouter } from 'next/router'
export default function ReadMore() {
const router = useRouter()
return (
<button onClick={() => router.push('/about')}>
Click here to read more
</button>
)
}Shallow Routing
-
Shallow Routing은 Router.push() 또는 Link 컴포넌트를 사용하여 라우팅을 변경할 때, 페이지의 URL은 변경되지만 페이지의 상태와 데이터는 변경되지 않도록 하는 기능임.
-
주로 쿼리 파라미터를 사용하여 페이지를 필터링하거나 정렬할 때 유용합니다. Shallow Routing은 URL을 업데이트하면서 페이지 컴포넌트를 다시 렌더링하지 않고 페이지 내의 컴포넌트들을 그대로 유지하는 방식으로 작동
-
Shallow Routing을 사용하는 경우, 페이지의 getInitialProps 또는 getServerSideProps와 같은 데이터 페치 로직이 다시 실행되지 않음.
-
대신에 componentDidUpdate나 useEffect와 같은 메소드나 훅을 사용하여 URL의 변경을 감지하고 필요한 데이터를 업데이트할 수 있다.
import { useEffect } from 'react'
import { useRouter } from 'next/router'
// Current URL is '/'
function Page() {
const router = useRouter()
useEffect(() => {
// Always do navigations after the first render
router.push('/?counter=10', undefined, { shallow: true })
}, [])
useEffect(() => {
// The counter changed!
}, [router.query.counter])
}
export default Pageref) Next.js 공식문서 : https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating
Next.js App Component
-
공통 레이아웃, 글로벌스타일, 초기화 진행하는 컴포넌트, _app.tsx에서 override가능함.
-
Component는 현재 페이지 컴포넌트, pageProps는 페이지에 전달되는 prop임.
-
서버 사이드 렌더링 설정: getInitialProps나 getServerSideProps와 같은 메소드를 이용하여 데이터를 가져오는 작업을 수행할 수 있습니다.
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}Document
-
HTML 문서구조 커스텀하기위해 사용함. Next.js에서 제공하는 컴포넌트들을 사용함.
-
SSR 및 초기 렌더링시에만 작동하며, 클라이언트측에서는 작동하지 않음.
-
Html: HTML 문서의 요소를 나타냅니다. 언어 및 메타 정보 등을 설정할 수 있음.
-
Head: HTML 문서의 요소를 나타냅니다. 여기에는 페이지의 제목, 스타일시트, 메타 태그 등을 추가할 수 있음.
-
Main: Next.js 애플리케이션의 본문 컴포넌트를 렌더링.
-
NextScript: Next.js의 자바스크립트 및 스크립트를 포함한 요소를 렌더링.
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
{/* 여기에 head 요소들을 추가할 수 있습니다. */}
</Head>
<body>
<Main /> {/* Next.js 컴포넌트가 렌더링되는 곳 */}
<NextScript /> {/* Next.js 스크립트가 추가되는 곳 */}
</body>
</Html>
);
}
}
export default MyDocument;
0개의 댓글
