1차 강의 노트 (페이지라우터, 프리패칭)

1. 페이지 라우터 (Page Router)

Next.js에서 페이지를 만드는 가장 기본적인 방법입니다. pages 디렉터리에 파일을 만들면 파일 경로가 곧 URL 경로가 됩니다.

• 정적 라우팅: 파일 이름을 URL 경로로 사용합니다.
  • pages/book/index.tsx -> /book
  • pages/book.tsx -> /book
• 동적 라우팅 (Dynamic Routes): URL의 특정 부분을 동적인 값으로 받습니다.
  • pages/book/[id].tsx
    • URL: /book/1
    • 설명: id라는 이름의 URL 파라미터로 1을 받습니다.
• Catch-all 라우트: 여러 개의 URL 파라미터를 배열 형태로 받습니다.
  • pages/book/[...slug].tsx
    • URL: /book/1/1234/1234
    • 설명: slug라는 배열로 ['1', '1234', '1234']를 받습니다.
• Optional Catch-all 라우트: 경로가 없어도 매칭됩니다.
  • pages/book/[[...slug]].tsx
    • URL: /book 또는 /book/1
    • 설명: slug가 비어있거나 배열로 값을 받습니다. 경로가 없을 때 404 에러가 발생하지 않습니다.

---

2. 네비게이션 (Navigation)

페이지 이동은 새로고침 없이 빠르게 이루어져야 사용자 경험이 좋습니다.

• <a> 태그: 일반 HTML <a> 태그를 사용하면 페이지가 완전히 새로고침(full page reload) 됩니다.
• <Link> 컴포넌트: Next.js의 <Link> 컴포넌트를 사용하면 클라이언트 사이드 네비게이션이 이루어져 페이지가 빠르게 전환됩니다.

import Link from "next/link";

<Link href={"/book/1"}>book/1 페이지로 이동</Link>

---

3. 프리페칭 (Prefetching)

Next.js는 사용자가 클릭할 가능성이 높은 링크를 미리 예측하고, 해당 페이지의 코드를 미리 다운로드하는 기능을 제공합니다.

• 자동 프리페칭: <Link> 컴포넌트를 사용하면 뷰포트(viewport)에 들어온 링크에 대해 자동으로 프리페칭이 일어납니다.
• 프리페칭 비활성화: 자주 클릭하지 않는 링크는 prefetch={false} 속성을 사용해 비활성화할 수 있습니다.

<Link href={"/search"} prefetch={false}>search</Link>

• 수동 프리페칭: 버튼 클릭과 같은 이벤트에서는 프리페칭이 자동으로 되지 않습니다. 이럴 땐 useEffect 훅을 사용하여 수동으로 프리페칭을 할 수 있습니다.

---

4. 컴포넌트 생명주기: 마운트(Mount)

마운트는 React 컴포넌트가 처음 생성되어 브라우저의 DOM에 삽입되는 과정을 말합니다. 이 시점에 특정 작업을 실행하는 경우가 많습니다.

• 마운트 과정:
  1. 생성: 컴포넌트 인스턴스가 메모리에 만들어집니다.
  2. 렌더링: 화면에 표시할 요소들을 결정합니다.
  3. DOM 삽입: 실제 브라우저 화면에 컴포넌트가 나타납니다.
• useEffect 훅 활용: 함수형 컴포넌트에서는 useEffect 훅을 사용해 마운트 시점에 코드를 실행합니다. 의존성 배열([])을 비워두면, 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  useEffect(() => {
    // 이 코드는 컴포넌트가 처음 마운트될 때만 실행
    console.log('컴포넌트 마운트 완료!');
    router.prefetch('/test'); // '/test' 페이지를 미리 프리페칭
  }, []); // 빈 배열: 마운트 시점에 한 번만 실행

  return <div>내용</div>;
}

 

이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗

https://inf.run/4oB9v