# useSelectedLayoutSegments 훅 쉽게 이해하기

`useSelectedLayoutSegments`는 Next.js에서 클라이언트 컴포넌트 안에서 사용할 수 있는 아주 유용한 훅이에요. 이 훅은 호출된 Layout 컴포넌트 아래에서 활성화된(즉, 현재 URL 경로에서 사용 중인) 라우트 세그먼트(segment)를 읽어올 수 있어요.

예를 들어, 부모 Layout에서 자식 라우트가 어떤 상태인지 알아야 할 때, 특히 현재 페이지 경로를 기반으로 빵 부스러기(브레드크럼) 같은 UI를 만들 때 유용하답니다!

---

## 어떻게 쓰는지 간단한 예시

```js
'use client'
 
import { useSelectedLayoutSegments } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments()
 
  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  )
}
```

위의 코드는 현재 활성화된 라우트 세그먼트들을 배열로 받아와서 `<ul>`로 나열해주는 아주 기본적인 사용법입니다. 예를 들어 현재 경로가 `/products/electronics` 라면, `segments`는 `['products', 'electronics']` 형태가 될 거에요.

---

## 참고하면 좋은 점!

- **클라이언트 컴포넌트에서만 작동해요**  
  당연히 내부에 `'use client'` 지시자가 꼭 있어야 하고, 서버 컴포넌트에선 사용할 수 없어요.

- **Breadcrumbs 만들기에 매우 좋아요!**  
  부모 레이아웃에서 자식 경로를 확인해 빵 부스러기 네비게이션 UI를 만들거나, 현재 위치에 따라 다른 스타일을 적용하는 상황에 활용하기 딱이죠.

- **동적 라우트도 문제없어요!**  
  예를 들어 `/blog/[slug]` 같은 동적 경로를 사용할 때 현재 어떤 슬러그를 보고 있는지 쉽게 알 수 있어요.

- **배열 형태 반환**  
  항상 배열로 반환되니까 각 세그먼트를 간단히 `.map()` 해서 처리할 수 있답니다.

---

### 조금 더 발전된 활용 팁

```js
'use client'

import { useSelectedLayoutSegments } from 'next/navigation'

export default function Breadcrumbs() {
  const segments = useSelectedLayoutSegments()

  // 각 세그먼트를 적절히 대문자로 변환해서 보여주기
  const formattedSegments = segments.map(seg => seg.charAt(0).toUpperCase() + seg.slice(1))

  // 링크 처리를 할 때는, 현재까지의 경로를 누적해서 만들어줍니다.
  let path = ''
  return (
    <nav aria-label="breadcrumb">
      <ul style={{ display: 'flex', gap: '8px' }}>
        {formattedSegments.map((segment, idx) => {
          path += '/' + segments[idx]
          return (
            <li key={idx}>
              <a href={path}>{segment}</a>
              {idx < segments.length - 1 && ' / '}
            </li>
          )
        })}
      </ul>
    </nav>
  )
}
```

이렇게 하면 현재 위치에 따른 링크가 포함된 빵 부스러기 네비게이션을 만들 수 있답니다. 정말 간단하죠?

---

이 훅을 잘 활용하면 레이아웃 안에서 현재 경로 정보를 쉽게 읽어와 다양한 UI 변화를 줄 수 있으니 꼭 한 번 사용해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

> 알아두면 좋은 점:  
useSelectedLayoutSegments는 클라이언트 컴포넌트 훅이고, 레이아웃(Layout)은 기본적으로 서버 컴포넌트라서, 보통 useSelectedLayoutSegments는 레이아웃 안에 임포트된 클라이언트 컴포넌트를 통해 호출됩니다.  
그리고 이 훅이 반환하는 segments 배열에는 경로 그룹(Route Groups)도 포함되는데, UI에 굳이 표시하고 싶지 않은 경우가 많아요. 그럴 땐 filter() 배열 메서드를 써서 대괄호로 시작하는 항목들(예: [group])을 제외하면 됩니다.

## 파라미터

| 파라미터          | 설명                                                      |
|------------------|---------------------------------------------------------|
| parallelRoutesKey | 선택적으로 사용 가능한 문자열로, 활성화된 특정 슬롯 내 경로 세그먼트를 읽을 때 사용 |


```js
const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)
```

useSelectedLayoutSegments는 parallelRoutesKey를 인자로 받을 수 있는데, 이 키를 넘기면 해당 슬롯의 활성화된 라우트 세그먼트를 읽어올 수 있어요. 예를 들어, 하나의 레이아웃 안에 여러 병렬 라우트가 있을 때 유용하죠.

---

### 추가 팁!  
경로 그룹(Route Groups)은 파일이나 폴더 이름에 대괄호([])를 써서 만든 가상의 라우트 구획입니다. 보통 URL 경로에는 표시되지 않지만, 내부적으로 라우팅에 도움이 되죠. 그래서 UI에 표시하려면 걸러내는 게 좋고, 예를 들어 이렇게 쓰면 됩니다:

```js
const filteredSegments = segments.filter(segment => !segment.startsWith('['));
```

이런 세세한 관리가 가능해서, 내비게이션 UI나 Breadcrum 같은 컴포넌트를 만들 때 훨씬 깔끔한 결과물을 얻을 수 있답니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 반환값 (Returns)

`useSelectedLayoutSegments` 훅은 호출된 레이아웃으로부터 **한 단계 아래에 있는 활성화된 세그먼트들**을 문자열 배열로 반환해줘요. 만약 그런 세그먼트가 전혀 없다면, 빈 배열을 반환합니다.

조금 더 쉽게 예를 들어볼게요. 다음과 같은 레이아웃 구조와 방문 URL이 있다고 할 때, 반환되는 세그먼트는 아래 표와 같이 나옵니다:

| Layout             | 방문한 URL           | 반환되는 세그먼트          |
|--------------------|----------------------|----------------------------|
| `app/layout.js`     | `/`                  | `[]`                        |
| `app/layout.js`     | `/dashboard`          | `['dashboard']`             |
| `app/layout.js`     | `/dashboard/settings` | `['dashboard', 'settings']` |
| `app/dashboard/layout.js` | `/dashboard`      | `[]`                        |
| `app/dashboard/layout.js` | `/dashboard/settings` | `['settings']`              |

---

### 좀 더 설명을 덧붙이자면

- 이 훅은 **현재 레이아웃 위치(폴더) 기준으로 다음 하위 경로들을 배열로 반환**하는 기능이에요. 예를 들어, `app/layout.js` 아래에서 호출하면 전체 경로의 첫 세그먼트부터 하나씩 배열로 주고, `app/dashboard/layout.js` 아래에서 호출하면 그 기준 폴더 바로 아래의 세그먼트들만 반환하는 거죠.
- 그래서 URL 경로가 길더라도 각 레이아웃별로 자신과 바로 아래 경로 구간을 정확하게 인지할 수 있어서, 복잡한 네스팅 구조에서도 유용하게 쓸 수 있어요.

> 만약 Next.js 같은 프레임워크를 쓰고 있고, 다이나믹 라우팅을 하거나 레이아웃별로 상태관리를 하고 싶다면 `useSelectedLayoutSegments`를 잘 활용해보세요. 현재 위치한 레이아웃 기준으로 어떤 세그먼트가 활성화되어 있는지 쉽게 파악할 수 있답니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 버전 히스토리

| 버전       | 변경 사항                     |
|------------|------------------------------|
| `v13.0.0`  | `useSelectedLayoutSegments`가 새롭게 추가됨. |

---

이렇게 간단하게 버전별로 변경된 내용을 정리해두면, 나중에 업데이트 내역을 한눈에 파악하기 너무 편해요. 특히 라이브러리나 프레임워크를 사용할 때는 어떤 기능이 새로 생겼는지, 어떤 버그가 고쳐졌는지 알아두는 게 중요하거든요.

참고로, 여기서 소개한 `useSelectedLayoutSegments`는 특정 레이아웃 세그먼트(구간)를 선택하는 데 도움을 주는 hook인데요, React 같은 환경에서 라우팅이나 UI를 좀 더 세밀하게 제어할 때 유용하게 쓸 수 있답니다. 만약 더 궁금하면 관련 예제도 알려드릴게요!

Next.js 15에서 useSelectedLayoutSegments로 레이아웃 세그먼트 선택하는 방법

# useSelectedLayoutSegment 훅이란?

`useSelectedLayoutSegment`는 클라이언트 컴포넌트에서 사용할 수 있는 훅으로, 호출한 레이아웃 바로 아래에 있는 활성화된(활성 상태인) 라우트 세그먼트를 읽을 수 있게 도와줘요.

### 언제 쓰면 좋을까?

예를 들면, 부모 레이아웃 안에 여러 자식 탭이 있을 때 각 탭의 활성화 여부에 따라 스타일을 바꾸고 싶을 때 유용해요. 즉, 현재 어떤 세그먼트(탭 혹은 페이지의 구간)가 활성화 되어 있는지 쉽게 알 수 있어서, 그 정보를 UI에 반영하면 됩니다.

### 코드 예시

```jsx
'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()

  return <p>Active segment: {segment}</p>
}
```

이렇게 하면 현재 활성화된 세그먼트 이름이 화면에 출력되죠.

---

### 추가 팁!

- `useSelectedLayoutSegment`는 부모 레이아웃 아래 한 단계의 세그먼트만 읽어올 수 있다는 점을 기억하세요. 예를 들어 `/dashboard/settings/profile` 같은 경로에서, `dashboard` 레이아웃 내에서 이 훅을 쓰면 `settings` 세그먼트만 받아옵니다. `profile`까지 깔끔하게 가져오려면 다른 방식이 필요해요!
- 복수 개의 세그먼트가 활성화되는 상황(중첩 라우팅 등)에서는 `useSelectedLayoutSegments`라는 복수형 훅도 있어서, 필요하면 함께 살펴보시는 것도 좋습니다.
- 네비게이션 UI를 만들 때 이 훅 덕분에 상태 관리나 URL 파싱 없이도 현재 위치를 쉽게 파악할 수 있어 개발 효율이 훨씬 올라가요!

Next.js의 App Router와 함께 쓸 때 특히 훌륭한 툴이니 다음 프로젝트에 바로 활용해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

> 알아두면 좋은 점:  
useSelectedLayoutSegment 훅은 클라이언트 컴포넌트에서 사용해야 합니다. 왜냐하면 레이아웃(Layout)은 기본적으로 서버 컴포넌트이기 때문이죠. 그래서 보통 useSelectedLayoutSegment는 레이아웃 안에 임포트된 클라이언트 컴포넌트에서 호출하게 됩니다.  
그리고 이 훅은 현재 활성화된 세그먼트 중 한 단계 아래(자식 레벨) 세그먼트만 반환해요. 만약 활성화된 모든 세그먼트를 한꺼번에 받고 싶다면 useSelectedLayoutSegments라는 훅을 참고하세요.

## 파라미터

| 파라미터명          | 타입         | 설명                                                                                  |
|------------------|------------|-------------------------------------------------------------------------------------|
| parallelRoutesKey | string (옵션) | 특정 슬롯 내에서 활성화된 경로 세그먼트를 읽고 싶을 때 사용합니다. 예를 들어 병렬 라우트가 여러 개인 경우 해당 슬롯을 지정할 수 있어요. |

```js
const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)
```

---

### 추가로 알려드릴 팁!  
Next.js의 앱 디렉토리 구조에서 라우트 세그먼트(segment)는 URL 경로의 일부를 의미합니다. 예를 들어 `/dashboard/settings`라면 `dashboard`와 `settings`가 각각 하나의 세그먼트죠.  
useSelectedLayoutSegment 훅을 활용하면 현재 화면에서 어느 경로 세그먼트가 활성화되어 있는지를 쉽게 알 수 있어서, 조건부 렌더링이나 UI 상태 관리에 굉장히 유용합니다.

또한, parallelRoutesKey를 지정하는 경우는 조금 특별한데요, 예를 들어 하나의 레이아웃에 여러 병렬 경로 슬롯이 있다면, 어느 슬롯의 세그먼트를 조회할지 명확히 할 수 있어 좋습니다. 예전에는 복잡한 라우팅 정보를 관리하기 위해 별도의 로직을 짜야 했던 점을 생각하면, 이 훅이 확실히 편리함을 더해주죠!

꼭 클라이언트 컴포넌트 안에서만 쓸 수 있다는 점 기억하시고, 서버 컴포넌트라면 클라이언트 컴포넌트를 분리해서 함께 사용하는 구조로 짜시면 됩니다. 이 부분은 Next.js 13 이후 앱 디렉토리 사용 시 자주 보게 될 패턴이라 익숙해지면 개발이 한결 수월해질 거예요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## Returns

`useSelectedLayoutSegment`은 현재 활성화된 세그먼트의 문자열을 반환하며, 만약 활성 세그먼트가 없다면 `null`을 반환합니다.

아래 표는 다양한 레이아웃과 방문한 URL에 따른 반환값 예시를 보여주는데요, 한눈에 이해하기 쉽게 정리해봤어요.

| Layout                    | 방문한 URL              | 반환 값          |
|---------------------------|-------------------------|------------------|
| `app/layout.js`            | `/`                     | `null`           |
| `app/layout.js`            | `/dashboard`            | `'dashboard'`    |
| `app/dashboard/layout.js`  | `/dashboard`            | `null`           |
| `app/dashboard/layout.js`  | `/dashboard/settings`   | `'settings'`     |
| `app/dashboard/layout.js`  | `/dashboard/analytics`  | `'analytics'`    |
| `app/dashboard/layout.js`  | `/dashboard/analytics/monthly` | `'analytics'` |

여기서 중요한 점은, 상위 레이아웃에서 `/dashboard` 같은 경로를 방문했을 때는 세그먼트가 바로 반환되지만, 하위 레이아웃에서는 경로에 따라 조금 다르게 동작한다는 거예요.

예를 들어, `app/dashboard/layout.js` 안에서 `/dashboard/analytics/monthly`를 방문하면 가장 가까운 하위 세그먼트인 `'analytics'`를 반환하죠. 이 부분은 레이아웃과 라우팅 계층 구조를 잘 이해하면 훨씬 더 효과적으로 활용할 수 있을 거예요.

추가 팁을 드리자면, 이 훅은 주로 동적으로 현재 경로에 따라 UI를 변경하거나, 세그먼트 기반으로 조건부 렌더링 해야 할 때 유용하게 사용할 수 있어요. React 내비게이션 상태 관리와 잘 결합하면 복잡한 네비게이션 로직을 훨씬 간결하고 명확하게 만들 수 있답니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 예제

### 활성화된 링크 컴포넌트 만들기

`useSelectedLayoutSegment` 훅을 활용해서 현재 활성화된 세그먼트에 따라 스타일이 바뀌는 활성 링크 컴포넌트를 만들 수 있어요. 예를 들어, 블로그 사이드바에 자주 보여주는 게시글 리스트를 구현할 때 유용하죠.

```js
'use client'

import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

// 이 *클라이언트* 컴포넌트는 블로그 레이아웃에 포함돼서 사용됩니다.
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // 예를 들어 `/blog/hello-world` 에서 현재 선택된 레이아웃 세그먼트는 'hello-world'가 됩니다.
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // 링크가 활성화 됐을 때는 폰트가 굵게, 그렇지 않으면 기본 스타일로 표시합니다.
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}
```

---

여기서 살짝 더 알려드리자면, `useSelectedLayoutSegment`는 현재 URL 경로 중 해당 레이아웃의 세그먼트를 반환해주기 때문에, 특정 경로가 선택됐는지 쉽게 알 수 있어요. 이걸 활용해 사이드바 메뉴, 탭 네비게이션 등에서 '현재 위치' 표시를 깔끔하게 할 수 있답니다.

또한, 스타일뿐만 아니라 클래스명을 바꾸거나 아이콘을 변경하는 방식 등으로도 확장할 수 있으니 필요한 UI에 맞게 조절해보세요! Next.js 13의 레이아웃과 내비게이션 시스템을 활용하면 이런 사용자 경험이 훨씬 자연스럽고 간편해집니다.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
// 클라이언트 컴포넌트인 BlogNavLink를 부모 레이아웃(Server Component)에 임포트하는 예제입니다.
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'

export default async function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  // 비동기로 추천 포스트를 받아옵니다.
  const featuredPosts = await getFeaturedPosts()

  return (
    <div>
      {/* 받아온 추천 포스트들을 하나씩 돌면서 BlogNavLink 컴포넌트에 slug와 제목을 넘겨 렌더링합니다. */}
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      {/* 하위 컴포넌트(children)를 렌더링 합니다. */}
      <div>{children}</div>
    </div>
  )
}
```

---

### Version History

| Version   | Changes                      |
|-----------|------------------------------|
| `v13.0.0` | `useSelectedLayoutSegment` 훅이 도입되었습니다. |

---

#### 간단 팁!

- `Layout` 컴포넌트는 React의 **서버 컴포넌트(Server Component)**로 설계되어 있습니다. 서버에서 데이터를 받아오고 렌더링하는 데 최적화되어 있죠.
- 클라이언트 컴포넌트를 렌더링하려면(예: 여기서 `BlogNavLink`) 반드시 클라이언트 컴포넌트로 만들어야 하며, 이 부분은 "use client" 지시어를 파일 상단에 넣어야 합니다.
- Next.js 13의 새로운 라우팅 시스템에서 레이아웃은 중첩 구조를 가질 수 있어, 이처럼 하위 컴포넌트(children)를 받는 패턴이 일반적입니다.
- `useSelectedLayoutSegment`는 라우트가 활성화되었는지 알 수 있게 해줘서, 네비게이션 메뉴 활성화 등에 자주 사용되는 커스텀 훅이에요!

이 코드를 활용해서 동적인 네비게이션이나 블로그 포스트 목록 등을 서버 측에서 불러와서 쉽게 만들 수 있다는 점, 꼭 기억하세요 :)

Nextjs 15에서 useSelectedLayoutSegment 훅을 활용하는 방법

Next.js 15에서 useSearchParams로 현재 URL 쿼리 쉽게 가져오는 방법

# useRouter

`useRouter` 훅은 클라이언트 컴포넌트에서 프로그래밍 방식으로 라우트를 변경할 수 있게 해줍니다.

> 추천하는 방법: 특별한 이유가 없다면 `Link` 컴포넌트를 사용하는 것을 권장해요. `useRouter`는 버튼 클릭 같은 이벤트 핸들러 내에서 라우팅을 처리해야 할 때 유용합니다.

```js
'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
```

### 추가 팁!

- `router.push()`는 특정 경로로 이동할 때 사용해요.
- `router.replace()`도 있는데, 이건 현재 기록을 새 기록으로 대체해서 뒤로 가기 시 이전 페이지로 못 돌아가게 할 때 쓰입니다.
- `replace` 기능이 필요할 땐 `router.replace('/path')`를 사용해 봐요.
- `useRouter`는 클라이언트 컴포넌트 전용 훅이라는 것도 기억하세요. 서버 컴포넌트에서는 사용할 수 없습니다.

간단하게 버튼 클릭만으로 페이지 이동이 가능해서, 사용자 액션에 따른 동적인 라우팅 구현할 때 매우 편리하답니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## useRouter() 훅 쉽게 정리하기!

Next.js에서 클라이언트 라우팅을 다룰 때 꼭 알아야 하는 `useRouter()` 훅! 이 훅을 사용하면 페이지 전환, 새로고침, 뒤로가기 등 라우터 관련 동작들을 손쉽게 할 수 있답니다.

아래 표를 보면서 주요 메서드들을 쉽게 정리해봤어요.

| 메서드 | 설명 |
|-------|-------|
| `router.push(href: string, scroll: boolean)` | 클라이언트 라우터 이동! 브라우저 히스토리에 새 주소를 추가해요. (페이지 이동 느낌) |
| `router.replace(href: string, scroll: boolean)` | 페이지 이동 같은데, 히스토리에는 새로 추가하지 않아요. (현재 페이지 교체) |
| `router.refresh()` | 현재 페이지를 새로고침! 서버에 다시 요청해서 데이터 갱신, React 서버 컴포넌트 다시 렌더링! 클라이언트 상태(예: `useState`)나 스크롤 위치는 그대로 유지해줘요. |
| `router.prefetch(href: string)` | 주소를 미리 로딩해서 페이지 이동을 더 빠르게 하도록 준비해요. |
| `router.back()` | 브라우저 history에서 이전 페이지로 이동 (뒤로가기) |
| `router.forward()` | 브라우저 history에서 다음 페이지로 이동 (앞으로가기) |

---

### 주의할 점! 🚨

`router.push` 나 `router.replace`에 신뢰할 수 없거나 필터링되지 않은 URL을 넣으면 XSS(크로스 사이트 스크립팅) 공격에 노출될 위험이 있어요. 예를 들어, `javascript:` URL을 넣으면 페이지 내에서 실행돼서 보안 문제를 일으킬 수 있죠. 그러니까 항상 URL을 검증하거나 정제해서 넣는 습관을 가지는 게 좋아요.

그리고 Next.js의 `<Link>` 컴포넌트는 사용자가 화면에 보는 순간 해당 경로를 자동으로 prefetch하기 때문에 보통 직접 `router.prefetch`를 호출할 일은 많지 않아요.

`router.refresh()`를 호출해도 fetch 요청이 캐시되어 있다면 똑같은 결과가 나올 수 있고, 쿠키나 헤더 같은 동적인 요소 때문에 서버 응답이 달라질 수도 있어요. 그래서 상황에 맞게 적절히 사용해야 합니다.

---

### next/router에서 useRouter로 마이그레이션하기

기존에 `next/router`에서 `useRouter`를 썼다면, 앱 라우팅 구조가 바뀌면서 `next/navigation` 패키지의 `useRouter()`를 써야 하는 경우가 있어요. 가장 큰 차이점은 서버 컴포넌트 지원과 라우팅 전략인데, 새로운 `useRouter`는 서버와 클라이언트 상태를 자연스럽게 연결해주고, 좀 더 React 18 기준에 맞춘 동작을 제공해 줍니다.

마이그레이션할 때는 중요한 메서드들의 파라미터가 조금 바뀔 수 있으니 Next.js 공식 문서를 잘 참고하세요!

---

### 개인적인 경험 한마디

요즘 Next.js에서 페이지 전환할 때 `router.push()` 와 `router.replace()`를 적절히 구분해서 사용하면 UX가 확실히 좋아요. 예를 들어, 검색 페이지에서 쿼리만 바꾸는 경우에는 replace로 히스토리를 쌓지 않고, 새 페이지로 이동할 땐 push를 쓰면 뒤로가기 시 사용자가 혼란스럽지 않죠.

또, `router.refresh()`는 상태 유지가 필요한 상황에서 데이터만 싹 다시 불러오고 싶을 때 정말 유용해요. React Query나 SWR 같은 데이터 페칭 라이브러리와 함께 쓰면 더욱 시너지!

오늘은 Next.js `useRouter()` 메서드들을 정리해봤는데, 실제 프로젝트에서 꼭 써보면서 경험 쌓아보세요~! 궁금한 점 있으면 댓글로 알려주세요. 함께 공부해봅시다! 😊


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js의 App Router를 사용하면서 알아두면 좋은 네비게이션 관련 변경사항들을 정리해봤어요. 기존에 많이 쓰던 `useRouter` 훅이나 `pathname`, `query` 같은 것들이 달라졌으니 참고하시면 좋아요!

---

### 주요 변경점

- `useRouter` 훅은 이제 **`next/router`**가 아니라 **`next/navigation`**에서 가져와야 해요.
- `pathname` 문자열이 없어지고, 대신 **`usePathname()`** 훅을 사용해서 현재 경로를 가져와요.
- `query` 객체도 없애고 **`useSearchParams()`** 훅으로 쿼리 파라미터를 다루게 되었어요.
- `router.events` 이벤트 리스너는 다른 방식으로 대체되었으니 아래에서 확인해 주세요.

---

추가로, 이전에는 `router.events`를 통해 라우팅 이벤트를 듣고 상태를 업데이트하는 경우가 많았는데, App Router에서는 이런 이벤트 관리도 좀 더 간단하고 직관적으로 바뀌었답니다.

더 자세한 내용과 전체 마이그레이션 가이드는 공식 문서를 참고하는 걸 추천드려요!

---

## 예시

### 라우터 이벤트 다루기 예제

| 이전 방식 (Old - `next/router`)        | 새로운 방식 (New - `next/navigation`)                |
|---------------------------------------|-----------------------------------------------------|
| `import { useRouter } from 'next/router';` | `import { useRouter } from 'next/navigation';`         |
| `const router = useRouter();`          | `const router = useRouter();`                         |
| `const path = router.pathname;`        | `import { usePathname } from 'next/navigation';`<br>`const path = usePathname();`       |
| `const query = router.query;`           | `import { useSearchParams } from 'next/navigation';`<br>`const searchParams = useSearchParams();`<br>`const myParam = searchParams.get('myParam');`      |
| `router.events.on('routeChangeStart', callback);` | 새로운 라우터 이벤트 방식 적용 (아래 공식 문서 참고) |

---

이전보다 더 함수형, 훅 중심으로 API가 개편된 느낌이죠? 뭔가 더 모던해졌고, React와도 자연스럽게 어울려서 쓰기 편해졌어요.

다음 프로젝트에서 Next.js App Router 쓸 때 참고해보시고, 궁금한 거 있으면 댓글이나 DM 주세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

페이지가 변경되는 걸 감지하고 싶을 때, Next.js의 Client Component 훅인 usePathname과 useSearchParams를 조합해서 사용할 수 있어요. 예를 들어, 이렇게 하면 현재 URL이 바뀔 때마다 콘솔에 찍히게 할 수 있죠.

```js
'use client'

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // 현재 URL을 활용하고 싶다면 여기서 작업 가능
    // ...
  }, [pathname, searchParams])

  return '...'
}
```

여기서 `usePathname()`은 현재 페이지의 경로(`/about`, `/product/1` 등)를 가져오고, `useSearchParams()`는 쿼리 스트링(`?id=123&ref=google` 같은 부분)을 가져와요. 두 값을 조합해서 완전한 URL을 만들 수 있어요.

그리고 이렇게 만든 `NavigationEvents` 컴포넌트를 레이아웃(layout)이나 다른 컴포넌트에 넣어서 페이지 전환 시 동작을 감지하게 할 수 있습니다. 예를 들어, 아래처럼 레이아웃 컴포넌트에 넣어주면 돼요:

```js
import { Suspense } from 'react'
import { NavigationEvents } from './NavigationEvents' // 경로는 실제 위치에 맞게

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <NavigationEvents />
        {children}
      </body>
    </html>
  )
}
```

이 방법의 장점은, Next.js 13의 App Router에서 라우트가 변경될 때마다 자동으로 현재 경로와 쿼리 파라미터를 받아서 효과적으로 반응할 수 있다는 점입니다. 예를 들어, 페이지 전환 시마다 Google Analytics 같은 외부 서비스에 페이지뷰를 기록하거나, 특정 조건에 따라 UI를 변경하는 로직을 넣을 때 유용해요.

추가로, `useSearchParams()`가 반환하는 객체는 실제로 `URLSearchParams` 인스턴스라서, `.get('paramName')` 같은 메서드도 쓸 수 있어요. 예를 들어 특정 쿼리파라미터 값만 가져오고 싶다면 이렇게 하면 되죠:

```js
const category = searchParams.get('category')
console.log('현재 카테고리:', category)
```

요약하자면, 페이지 이동을 감지하고 싶을 때 Next.js의 `usePathname`과 `useSearchParams` 훅을 조합해서 쉽게 현재 경로와 쿼리를 감시할 수 있습니다. 이걸 커스텀 훅이나 컴포넌트로 만들어서 재사용하면 훨씬 편해지겠죠? 실제로 이런 기능을 구현해 보면서 원하는 로직을 붙여보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

> 참고할 점: `NavigationEvents` 컴포넌트가 Suspense 경계 안에 감싸져 있는데요, 이는 `useSearchParams()` 훅이 정적 렌더링 중에 가장 가까운 Suspense 경계까지 클라이언트 사이드 렌더링을 발생시키기 때문이에요. 자세한 내용을 확인해보세요.

### 스크롤 탑 이동 비활성화하기

Next.js에서는 기본적으로 페이지 간 이동할 때 스크롤이 맨 위로 자동 이동합니다. 근데 이게 항상 필요하지는 않죠? 예를 들어, 사용자가 페이지를 이동해도 그 위치를 유지하고 싶을 때가 있어요.

이럴 땐 `router.push()`나 `router.replace()`를 호출할 때 옵션으로 `{ scroll: false }`를 넘기면 스크롤 이동을 막을 수 있어요.

아래 예제를 참고하세요!

```jsx
'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button
      type="button"
      onClick={() => router.push('/dashboard', { scroll: false })}
    >
      Dashboard
    </button>
  )
}
```

버튼을 누르면 `/dashboard` 페이지로 이동하지만, 스크롤 위치는 그대로 유지됩니다. 이런 기능은 특히 긴 페이지를 자주 오가는 SPA에서 유용하게 쓸 수 있어요.

---

추가 팁!  
`router.push()`와 `router.replace()`는 둘 다 페이지 이동을 하지만, `push`는 히스토리에 새 엔트리를 추가하고, `replace`는 현재 엔트리를 대체합니다. 스크롤 유지 옵션은 두 메서드에서 똑같이 사용할 수 있으니 상황에 맞게 선택하세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 버전 히스토리

| 버전      | 변경사항                                  |
|-----------|-----------------------------------------|
| `v13.0.0` | `next/navigation`에서 `useRouter`가 새로 도입됨 |

---

여기서 주목할 점은 Next.js가 13버전부터 라우팅 시스템에 변화를 줬다는 거예요. 기존에 `next/router`에서 제공하던 `useRouter` 훅이 이제는 `next/navigation`이라는 새로운 모듈로 이동했답니다. 

이렇게 바뀐 이유는 Next.js 팀이 서버 컴포넌트와 클라이언트 컴포넌트를 더 명확히 구분하고, 라우팅 관련 기능을 한층 더 최적화하기 위해서예요. 만약 여러분이 Next.js 13 버전으로 업그레이드하거나 새 프로젝트를 시작한다면, `useRouter`를 불러올 때 꼭 `next/navigation` 모듈에서 가져오는지 확인해보세요.

그리고 또 하나! 기존에 `next/router`를 사용하던 프로젝트를 마이그레이션 할 때는, API 차이가 있을 수 있으니 공식 문서나 마이그레이션 가이드를 참고하는 게 좋아요. 라이브러리나 플러그인이 아직 새 API를 완벽히 지원하지 않을 수도 있으니까요.

더불어 Next.js 13 버전에서는 앱 디렉토리(app directory)라는 새로운 폴더 구조가 등장했고, 이와 함께 라우터도 완전히 다시 설계되었으니 관심 있는 분들은 꼭 한 번 살펴보세요. React 서버 컴포넌트와 결합해서 정말 편리한 개발 경험을 제공합니다!

Next.js 15에서 useRouter로 현재 URL의 query 파라미터 쉽게 가져오는 방법

# usePathname 훅 소개

`usePathname`은 Next.js에서 제공하는 훅으로, 현재 URL의 경로(pathname)를 읽어올 수 있는 **클라이언트 컴포넌트** 전용 훅이에요.

---

```js
'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}
```

위 예제처럼 `usePathname`을 사용하면 현재 페이지의 경로를 쉽게 가져와서 화면에 출력할 수 있답니다.

---

### 왜 꼭 클라이언트 컴포넌트에서만 사용할까?

`usePathname` 훅은 **클라이언트 컴포넌트에서만** 사용해야 해요. 여기서 한 가지 오해하지 말아야 할 점은, 클라이언트 컴포넌트를 사용하는 것이 성능 저하(de-optimization)가 아니라는 거예요! 오히려 Next.js의 서버 컴포넌트 아키텍처 안에서 클라이언트 컴포넌트는 중요한 역할을 하죠.

즉, 서버 컴포넌트(Server Component)가 서버에서 렌더링하고, 클라이언트 컴포넌트(Client Component)는 브라우저에서 동적인 UI와 사용자 이벤트를 담당하는 역할 분담 덕분에 앱 성능을 최적화하는 구조랍니다.

---

### 참고로 알아두면 좋은 점

- `usePathname`으로 가져오는 경로는 쿼리 스트링이나 해시(#)를 포함하지 않고 순수한 경로만 반환해요. 예를 들어, `https://example.com/posts?id=123` 라면 `/posts`가 반환됩니다.
- 페이지 전환 시 URL이 변경되더라도 `usePathname`이 반환하는 값이 자동으로 업데이트되어 항상 최신 경로를 얻을 수 있어요.
- 만약 쿼리 스트링이나 해시까지 필요하다면 `useSearchParams` 같은 훅도 함께 활용해 보는 걸 추천해요.

이처럼 `usePathname`은 페이지 위치에 따라 UI를 다르게 표현해야 하는 상황에서 아주 유용하니, Next.js 프로젝트에서 꼭 숙지해 두시면 좋습니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

예를 들어, Client Component에서 usePathname을 사용할 경우 초기 페이지 로드 시 HTML로 렌더링 됩니다. 이후에 다른 경로로 이동할 때 이 컴포넌트는 다시 받아올 필요가 없어요. 한 번 클라이언트 자바스크립트 번들로 다운로드되면, 현재 상태(state)에 맞게 다시 렌더링됩니다.

> 참고할 점:
서버 컴포넌트에서 현재 URL을 읽는 것은 지원하지 않아요. 이게 의도된 설계인데, 덕분에 페이지 간 이동 시 레이아웃 상태를 유지할 수 있어요.

### 호환성 모드:
- usePathname은 fallback 경로를 렌더링할 때나, Next.js가 자동으로 정적 최적화한 pages 디렉토리의 페이지에서는 null을 반환할 수 있어요.
- next.config.js에서 리라이트(rewrites)를 쓰거나, Middleware와 함께 usePathname을 사용할 때는 useState와 useEffect도 같이 써야 합니다. 그렇지 않으면 hydration mismatch 오류가 발생할 수 있거든요.
- 프로젝트 내에 app 디렉토리와 pages 디렉토리가 모두 존재하면, Next.js가 자동으로 타입을 업데이트해줍니다.

## 파라미터 사용법

```js
const pathname = usePathname()
```

---

### 조금 더 알려드리자면

- usePathname 훅은 클라이언트 측에서 현재 경로를 쉽게 얻어올 때 아주 유용해요. 예를 들어, 메뉴에서 현재 위치에 따라 스타일을 다르게 하거나, 페이지 이동 시에 조건부 렌더링을 하고 싶을 때 딱 좋죠.
- 서버 컴포넌트는 URL 정보에 의존하지 않고 렌더링되기 때문에 처음 로드가 더 빠르고, 레이아웃 재사용성이 높아지는 장점이 있어요.
- 하지만 서버 컴포넌트에서 현재 URL을 다뤄야 한다면, 쿼리 파라미터 등을 props로 넘겨주거나 클라이언트 컴포넌트를 활용하는 등 우회하는 방식을 사용해야 합니다.

이렇게 usePathname과 Server/Client 컴포넌트의 역할 차이를 이해하면 Next.js의 앱 라우팅과 렌더링 전략을 더 잘 활용할 수 있을 거예요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

usePathname은 파라미터를 받지 않는 훅(hook)입니다.

## 반환값

usePathname은 현재 URL의 경로(pathname)를 문자열로 반환해줘요. 예를 들어 볼게요:

| URL                | 반환값           |
|--------------------|------------------|
| `/`                | `'/'`            |
| `/dashboard`       | `'/dashboard'`   |
| `/dashboard?v=2`   | `'/dashboard'`   |
| `/blog/hello-world`| `'/blog/hello-world'` |

보시다시피 쿼리 스트링(`?v=2` 같은 부분)은 제외하고 경로 부분만 딱 가져온답니다. 이 기능 덕분에 현재 사용자가 어느 페이지에 있는지 쉽게 알 수 있고, 라우팅 처리할 때 아주 유용해요.

추가로, usePathname은 Next.js 같은 리액트 프레임워크에서 공식적으로 지원되는 훅이고, 클라이언트 컴포넌트에서만 사용 가능하다는 점 참고하세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 예제

### 라우트 변경에 따라 무언가 하기

```js
'use client'

import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // 라우트(pathname)나 쿼리스트링(searchParams)이 바뀔 때마다 실행되는 코드 작성
    console.log('경로 또는 쿼리 파라미터가 변경되었습니다.')
  }, [pathname, searchParams])
}
```

| Version  | Changes               |
|----------|-----------------------|
| v13.0.0  | `usePathname`가 도입됨 |

---

이 예제는 Next.js의 `app` 디렉토리 기반 라우팅에서 클라이언트 컴포넌트가 라우트 경로나 쿼리 파라미터에 반응해 동작할 수 있게 해주는 방법입니다. `usePathname`과 `useSearchParams` 훅은 각각 현재 경로와 쿼리 스트링을 가져와서, `useEffect`의 의존성 배열에 넣어 경로나 쿼리가 바뀔 때마다 특정 작업을 실행할 수 있도록 도와줍니다.

🚀 참고로 `useSearchParams`는 반환하는 값이 `URLSearchParams` 객체와 유사한데, 내부적으로 Next.js가 리렌더링 최적화를 위해 커스텀한 부분이 있으니 참고하세요. 그리고 `useEffect`를 사용할 때는 클라이언트 컴포넌트임을 명시하는 `'use client'`가 꼭 필요합니다.

이런 방식은 사용자가 URL을 변경하면서도 데이터 페칭이나 UI 업데이트가 자동으로 반영되길 원할 때 유용하게 활용할 수 있으니까 꼭 기억해 두면 좋습니다!

Nextjs 13에서 usePathname으로 현재 URL 경로 쉽게 가져오는 방법

# useReportWebVitals 훅 사용법

이번에는 Next.js에서 제공하는 `useReportWebVitals` 훅에 대해 알아볼게요. 이 훅은 웹사이트의 **Core Web Vitals**(핵심 웹 성능 지표)를 쉽게 측정하고, 이를 여러분이 사용하는 분석 도구나 커스텀 로그에 연동할 수 있도록 도와줘요.

### Core Web Vitals가 뭐냐고요?

간단히 말해, Core Web Vitals는 사용자 경험과 직결되는 성능 지표들입니다. 페이지 로딩 속도, 반응성, 시각적 안정성 등을 측정해서 구글 검색 순위에도 영향을 주죠. 그러니까 꼭 체크해야 하는 중요한 수치예요!

---

## 기본 사용법

```js
'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

  return null
}
```

- `useReportWebVitals` 훅 안에 넘기는 콜백 함수에서 각 지표(metric)를 받아서 처리할 수 있어요.
- 여기선 간단하게 `console.log`로 결과를 확인하고 있지만, 이 자리에 GA(Google Analytics) 같은 외부 분석도구 연동 코드를 넣으면 됩니다.

---

## Layout에 적용하기

```js
import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}
```

- 일반적으로 페이지의 루트 컴포넌트나 레이아웃에 `WebVitals` 컴포넌트를 넣어서 전체 페이지에서 웹 바이탈 지표를 수집할 수 있도록 설정합니다.

---

## 추가 팁

- Core Web Vitals 값에는 **LCP(Largest Contentful Paint)**, **FID(First Input Delay)**, **CLS(Cumulative Layout Shift)** 등이 포함돼요.
- 지표 값을 서버로 보내려면 `fetch`나 `axios`를 활용해서 API에 전달하면, 실시간으로 사용자 경험 데이터를 모니터링할 수 있답니다.
- 만약 GA4를 쓰시는 분들에겐 [`gtag.event`를 활용하는 방법](https://developers.google.com/analytics/devguides/collection/gtagjs/events)도 추천해요.

---

이처럼 Next.js에서 기본으로 제공하는 `useReportWebVitals` 훅을 통해 간단하게 Core Web Vitals를 측정하고, 여러분만의 분석 체계에 연동해 보세요! 사용자의 체감 성능을 향상시키는 데 큰 도움이 될 거예요 :)


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

"useReportWebVitals" 훅을 사용할 때는 "use client" 디렉티브가 필요해요. 그래서 가장 효율적인 방법은, 이 훅을 사용하는 별도의 컴포넌트를 만들어서 루트 레이아웃에서 불러오는 거예요. 이렇게 하면 클라이언트 경계(client boundary)를 WebVitals 컴포넌트에만 딱 제한할 수 있어 성능 관리에도 도움이 되죠.

## useReportWebVitals 훅이 전달받는 metric 객체

이 훅에 넘겨주는 metric 객체에는 다음과 같은 여러 프로퍼티가 있어요:

| 프로퍼티명       | 설명                                                                                       |
|----------------|------------------------------------------------------------------------------------------|
| id             | 현재 페이지 로드 컨텍스트에서의 고유 식별자입니다.                                            |
| name           | 성능 지표의 이름이에요. 주로 웹 바이탈(Web Vitals) 지표들이고, TTFB, FCP, LCP, FID, CLS 등이 있어요.  |
| delta          | 이번 측정값과 이전 측정값 차이로, 보통 밀리초 단위입니다. 시간에 따라 얼마나 바뀌었는지 알려주죠.         |
| entries        | 이 성능 지표와 관련된 Performance Entry들의 배열입니다. 상세한 성능 이벤트 정보를 포함하고 있어요.       |
| navigationType | 측정을 트리거한 네비게이션 유형입니다. "navigate", "reload", "back_forward", "prerender" 중 하나가 될 수 있어요. |
| rating         | 성능 지표의 질적 평가로, "good", "needs-improvement", "poor" 중 하나입니다. 미리 정해진 임계값과 비교해 성능 상태를 보여주죠. |
| value          | 실제 측정값으로 보통 밀리초 단위의 성능 수치이며, 측정하는 지표에 따라 다양한 Performance API에서 가져옵니다. |

이렇게 상세한 정보가 있어서, 개발자가 웹사이트의 성능 상태를 구체적으로 파악하고 개선 작업을 할 때 큰 도움이 됩니다. 예를 들어, 사용자 경험에 중요한 LCP(최대 콘텐츠 표시 시간)나 FID(첫 입력 지연) 같은 지표를 실시간으로 모니터링하고, 문제가 있을 때 알림을 줄 수도 있죠.

또한, "navigationType" 덕분에 페이지 이동인지 새로고침인지, 혹은 뒤로가기인지 등 상황별 구분도 가능해 어떤 상황에서 성능 문제가 발생하는지 꼭 체크해야 할 부분이에요.

개발할 때 이 훅을 활용하면 사용자의 실제 경험에 가까운 성능 데이터를 얻을 수 있어요. 전통적인 Lighthouse 점수나 Lab 데이터보다 실제 사용자 환경을 반영하는 리얼월드 데이터 측정에 강력하니 참고하면 좋아요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## Web Vitals란?

Web Vitals는 웹 페이지의 사용자 경험(User Experience, UX)을 측정하기 위해 만들어진 중요한 지표들의 모음이에요. 이 지표들을 통해 사용자가 웹사이트를 이용할 때 느끼는 체감 속도나 인터랙션의 원활함을 객관적으로 평가할 수 있죠.

대표적인 Web Vitals 지표들은 다음과 같아요:

| 지표명                | 설명                                     |
|---------------------|----------------------------------------|
| Time to First Byte (TTFB) | 서버가 첫 번째 바이트를 보내기까지 걸리는 시간                 |
| First Contentful Paint (FCP) | 페이지 내에서 처음으로 텍스트나 이미지 같은 콘텐츠가 렌더링 되는 시간  |
| Largest Contentful Paint (LCP) | 페이지 내에서 가장 큰 콘텐츠(보통 메인 이미지나 텍스트 블록)가 렌더링 되는 시간 |
| First Input Delay (FID)   | 사용자가 처음으로 페이지와 인터랙션할 때 발생하는 지연 시간             |
| Cumulative Layout Shift (CLS) | 페이지 렌더링 중 레이아웃이 얼마나 많이 이동하는지를 나타내는 누적 값      |
| Interaction to Next Paint (INP) | 사용자가 어떤 인터랙션을 했을 때 다음 렌더링이 시작될 때까지 걸리는 시간     |

이 지표들을 한 번에 관리할 때는 보통 `name` 프로퍼티를 활용해 각 메트릭을 구분해서 다룹니다.

---

### 조금 더 알아보기

- **TTFB**는 서버와 네트워크 상태에 크게 영향을 받기 때문에, 백엔드 최적화나 CDN 사용으로 개선할 수 있어요.
- **FCP**와 **LCP**는 실제 사용자가 보는 화면이 얼마나 빨리 뜨는지 보여줘서, 프론트엔드 최적화 포인트를 잡을 때 아주 유용하답니다.
- **CLS** 지표가 중요한 이유는, 페이지가 갑자기 팍! 움직이면 사용자 경험이 크게 떨어지기 때문이에요. 예를 들어, 광고 배너나 이미지가 늦게 로딩되면서 텍스트가 휙 움직이는 현상이 이에 해당하죠.
- **FID**와 **INP**는 사용자의 ‘반응성’을 보여주는 지표로, 버튼 클릭이나 입력 도중 느껴지는 딜레이를 줄일 때 활용해요.

웹 페이지 성능을 개선하려면 이 Web Vitals 지표들을 꾸준히 모니터링하고, 사용자 입장에서 어떤 부분이 불편한지 파악하는 게 중요해요. 구글 크롬의 Lighthouse 나 웹사이트 성능 측정 도구들을 활용하면 쉽게 확인할 수 있으니 꼭 써보시길 추천드립니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP 결과를 처리하는 로직을 여기에 작성해보세요
        break
      }
      case 'LCP': {
        // LCP 결과를 처리하는 로직을 여기에 작성해보세요
        break
      }
      // 필요한 다른 Web Vitals 항목들도 추가할 수 있어요
    }
  })
}
```

## Vercel에서의 사용법

Vercel에서는 `useReportWebVitals` 훅 대신에 `@vercel/speed-insights` 패키지를 사용해 웹 성능을 측정하고 있어요. 그래서 만약 여러분이 Vercel 환경에서 작업 중이라면 이 패키지를 활용하는 게 더 적합할 수 있습니다. 하지만 로컬 개발 환경이나 다른 웹 성능 측정 서비스를 이용하는 경우에는 `useReportWebVitals` 훅이 매우 유용하답니다.

## 외부 시스템으로 결과 전송하기

웹 바이탈(Web Vitals) 데이터를 수집하는 것만으로는 충분하지 않죠. 이 데이터를 실제로 활용하려면 외부 모니터링 시스템(예: Google Analytics, Sentry, 직접 만든 서버 등)으로 보내야 합니다.

예를 들어, 간단히 Google Analytics에 보내는 코드는 다음과 같아요:

```js
useReportWebVitals((metric) => {
  window.gtag('event', metric.name, {
    event_category: 'Web Vitals',
    value: Math.round(metric.value),
    event_label: metric.id,
    non_interaction: true,
  })
})
```

- `metric.name`은 FCP, LCP, CLS 같은 웹 바이탈 이름이에요.
- `metric.value`는 측정된 값입니다.
- `metric.id`는 각각의 측정에 부여된 고유 ID인데, 중복 계산을 막는 데 도움이 돼요.
- `non_interaction: true`로 설정하면 사용자 세션에 영향을 않끼칩니다.

> 참고로, Web Vitals를 수집할 때는 네트워크 성능이나 사용자 경험에 영향을 최소화하기 위해 비동기로 데이터를 보내는 것이 좋아요.

---

**Tip!**  
Next.js 13부터는 `useReportWebVitals`를 `client component`에서만 사용할 수 있으니, 올바른 환경에서 사용하는지 꼭 확인하세요!

---

앞으로 웹 성능 측정 데이터를 잘 활용하면 사용자 경험을 크게 향상시킬 수 있으니 꼭 한번 적용해보시길 추천드려요! 😊


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

사이트 성능 측정, 즉 실제 사용자의 경험을 추적하고 싶을 때, 측정 결과를 원하는 서버로 전송할 수 있어요. 예를 들어, `useReportWebVitals` 훅에서 받은 메트릭 데이터를 서버에 보내는 코드는 아래와 같이 작성할 수 있답니다.

```js
useReportWebVitals((metric) => {
  const body = JSON.stringify(metric);
  const url = 'https://example.com/analytics';

  // `navigator.sendBeacon()` API가 있으면 사용하고,
  // 없으면 fetch()로 대체해요.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
});
```

**팁!** 만약 Google Analytics(구글 애널리틱스)를 사용한다면, 수집한 메트릭의 `id` 값을 활용해서 퍼센타일 같은 상세한 통계값도 직접 계산할 수 있어요. 이렇게 하면 데이터 분석에 더 유용하답니다.

그리고, 구글 애널리틱스가 초기화되어있다면 `window.gtag` 함수로 바로 이벤트를 전송하는 방법도 있어요. 예를 들어:

```js
useReportWebVitals((metric) => {
  window.gtag('event', metric.name, {
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // 값은 정수여야 해요
    event_label: metric.id, // 이 값은 페이지 로드마다 고유해요
    non_interaction: true, // 방문자 이탈률에 영향을 미치지 않아요
  });
});
```

여기서 CLS(누적 레이아웃 이동) 값은 소수점이고, 구글 애널리틱스 이벤트 값은 정수만 받기 때문에 곱하기 1000을 해서 변환한 점이 포인트예요.

### 참고할 점
- `navigator.sendBeacon()`은 사용자의 페이지가 언로드(unload)되어도 데이터를 신뢰성 있게 보내줘서, 웹 성능 측정에 아주 적합합니다.
- `fetch()`를 사용할 땐 `keepalive: true` 옵션을 붙여서, 페이지가 닫히거나 이동해도 전송 중단이 덜 하도록 설정합니다.
- Google Analytics의 `gtag`는 따로 라이브러리를 로드하거나 스니펫을 설치해야 동작하니, 사전에 환경 세팅이 필요해요.

실제 운영 중인 사이트에서 사용자 경험을 꾸준히 모니터링하고 싶다면, 위 코드를 응용해서 나만의 데이터 파이프라인을 구축해보는 것도 추천드려요! 다양한 지표를 모으면 성능 개선 포인트도 한눈에 보이고, 결과적으로 방문자 만족도도 높일 수 있답니다.

Next.js 15에서 useReportWebVitals로 웹 성능 데이터 측정하는 방법

# useParams 훅 쉽게 이해하기

Next.js에서 클라이언트 컴포넌트에서 현재 URL에 포함된 동적 라우트 파라미터를 읽고 싶을 때 `useParams` 훅을 사용해요. 예를 들어, 페이지 경로가 `/shop/[tag]/[item]` 같은 동적 경로일 때, URL에 들어오는 값들을 아주 간단하게 가져올 수 있답니다.

```js
'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()

  // 예를 들면,
  // Route: /shop/[tag]/[item]
  // URL:   /shop/shoes/nike-air-max-97
  // params: { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return '...'
}
```

위 예시에서 보듯이, URL에 적힌 `shoes`와 `nike-air-max-97`이 `params` 객체로 딱 받아와집니다. 타입스크립트를 쓴다면 타입을 이렇게 명시해주는 게 타입 안정성에도 좋아요.

---

## useParams 훅으로 알아둬야 할 파라미터

| 파라미터명 | 설명                        | 타입          | 비고                       |
|------------|-----------------------------|---------------|----------------------------|
| —          | 현재 URL의 동적 라우트 파라미터를 객체로 리턴 | `Record<string, string \| undefined>` | 기본적으로 `string` 타입의 값을 가지며, 없으면 `undefined` |

- `useParams()`는 경로에서 동적으로 지정된 부분들을 모두 객체 형태로 반환해요.
- 파라미터가 URL에 없다면 해당 키값에는 `undefined`가 들어옵니다.

---

### 추가 팁!

- 만약 페이지 안에서 여러 동적 경로를 분기처리하거나, 현재 URL 상태에 따라 다른 UI를 보여줘야 한다면 이 `useParams` 훅이 굉장히 유용하답니다.
- 다음과 같이 조건문을 통해서도 동작할 수 있어요:

```js
if (params.tag === 'shoes') {
  // shoes 관련 컴포넌트 렌더링
} else if (params.tag === 'clothing') {
  // clothing 관련 컴포넌트 렌더링
}
```

이렇게 간단하게 URL 경로에 따라 유저에게 보여질 화면을 조절할 수 있답니다!

---

`useParams` 훅은 Next.js 13의 App Router에서 클라이언트 단에서 라우트 파라미터를 다룰 때 필수라고 할 수 있어요. 앞으로 동적 라우트와 클라이언트 상태관리를 함께 하려면 꼭 기억해두세요! :)


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


```js
const params = useParams()
```

`useParams`는 파라미터를 받지 않는 훅(Hook)이에요.

## 반환값

`useParams`는 현재 라우트에서 동적으로 채워진 파라미터들을 담고 있는 객체를 반환합니다.

예를 들면, 경로가 `/user/:id` 라고 했을 때, URL이 `/user/123` 이라면 `params` 객체는 `{ id: '123' }` 가 되는 거죠.

---

### 좀 더 알아보기

`useParams`는 리액트 라우터에서 동적 라우팅을 할 때 매우 유용해요. URL 경로에 따라 컴포넌트가 다르게 동작해야 하는 경우 이 훅을 사용해서 URL의 특정 부분값을 쉽게 읽어올 수 있으니까요.

예를 들어, 블로그 글 상세 페이지에서 포스트 아이디를 URL에서 꺼내와서 API 요청에 사용하거나, 특정 사용자 페이지에서 사용자 아이디에 해당하는 데이터를 불러오는 작업에 딱 맞아요!

```js
import { useParams } from 'react-router-dom';

function UserProfile() {
  const params = useParams();
  console.log(params.id); // 여기서 id는 URL에서 받은 파라미터 값

  // 받아온 id로 API 호출 등 로직 작성 가능
}
```

요거 한번 잘 활용해보세요! 동적 라우팅이 필요한 프로젝트라면 정말 많으니까요.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

useParams에 대해 쉽게 정리해볼게요!

---

### useParams란?

`useParams`는 URL 경로에서 동적 세그먼트(dynamic segment)를 쉽게 가져올 수 있게 도와주는 훅이에요. 여기서 '동적 세그먼트'란 URL 중 변하는 부분을 말해요.

---

### 핵심 정리

- 객체 내 속성 각각은 하나의 동적 세그먼트입니다.
- 속성 이름은 그 세그먼트의 이름이고, 값은 실제 채워진 값이에요.
- 값은 문자열 하나일 수도 있고, 여러 개가 배열로 들어있을 수도 있어요. (동적 세그먼트 타입에 따라 달라짐)
- 만약 경로에 동적 파라미터가 없으면 `useParams`는 빈 객체를 리턴합니다.
- Pages Router에서 사용하면 초기 렌더링 시 `useParams`가 `null`이고, 라우터가 준비되면 위 규칙에 맞게 업데이트됩니다.

---

### 예제로 이해하기

| Route                       | URL         | `useParams()`               |
|-----------------------------|-------------|-----------------------------|
| `app/shop/page.js`          | `/shop`     | `{}`                        |
| `app/shop/[slug]/page.js`   | `/shop/1`   | `{ slug: '1' }`             |
| `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
| `app/shop/[...slug]/page.js` | `/shop/1/2` | `{ slug: ['1', '2'] }`      |

---

### 살짝 덧붙이자면…

- `useParams`는 Next.js 앱 디렉터리 구조에 맞춘 편리한 훅이에요.
- 동적 라우팅 패턴을 복잡하게 만들수록 `useParams`를 잘 이용하면 URL 파싱이 훨씬 편해져요.
- 예를 들면, `[...slug]`와 같이 rest 파라미터로 여러 경로 세그먼트를 배열로 받을 수 있어 유연하게 쓸 수 있답니다.
- 단, `useParams`는 클라이언트 사이드 훅이기 때문에 서버사이드 렌더 상황에 따라 초기 값이 다를 수 있다는 점도 고려하세요.

이해를 돕기 위해 다른 예제가 더 궁금하면 언제든 물어봐주세요! 😄


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

아래는 위의 HTML 테이블을 마크다운 형식으로 바꾼 내용이에요. 

| Version   | Changes              |
|-----------|----------------------|
| `v13.3.0` | `useParams` 도입됨.  |

---

`useParams`는 React Router 같은 라우팅 라이브러리에서 URL 파라미터를 쉽게 가져올 수 있게 도와주는 훅(hook)이에요. 보통 동적인 라우팅을 할 때 매우 유용하죠. 예를 들어 `/user/:id` 같은 경로에서 id 값을 가져올 때요.

다음엔 `useParams`를 실제로 어떻게 쓰는지 간단한 예시도 같이 다루도록 할게요. 개발하면서 자주 쓰게 될 기능이라 미리 익혀두면 좋아요!

Next.js 15에서 useParams로 현재 URL 파라미터 쉽게 가져오는 방법

# unstable_rethrow

Next.js에서 앱 코드에서 발생한 에러를 처리하려고 할 때, 내부적으로 발생하는 Next.js 자체 에러를 잡지 않고 넘기고 싶다면 `unstable_rethrow`를 활용할 수 있어요.

예를 들어, `notFound` 함수를 호출하면 Next.js 내부 에러가 던져지고, 이때 자동으로 `not-found.js` 컴포넌트가 렌더링됩니다. 그런데 이걸 `try/catch` 블록 안에서 감싸버리면, 내부 에러까지 잡히면서 `not-found.js`가 렌더링되는 걸 막아버려서 원하는 동작이 안 될 수 있어요.

아래 코드를 보면,

```js
import { notFound } from 'next/navigation'

export default async function Page() {
  try {
    const post = await fetch('https://.../posts/1').then((res) => {
      if (res.status === 404) notFound()  // 여기가 내부 에러 발생 지점
      if (!res.ok) throw new Error(res.statusText)
      return res.json()
    })
  } catch (err) {
    console.error(err)  // 여기서 내부 Next.js 에러까지 잡혀버림
  }
}
```

`notFound()` 호출 시 던지는 내부 Next.js 에러가 `catch`에 잡혀버리기 때문에, 사실은 `notFound`가 의도한 “404 페이지 렌더링”이 되지 않는 거죠.

---

### `unstable_rethrow`는 어떻게 쓰나?

`unstable_rethrow`를 활용하면 이런 내부 에러를 다시 던져서 Next.js가 원래 의도한 대로 처리할 수 있도록 도와줍니다.

예시는 다음과 같아요:

```js
import { notFound, unstable_rethrow } from 'next/navigation'

export default async function Page() {
  try {
    const post = await fetch('https://.../posts/1').then((res) => {
      if (res.status === 404) notFound()
      if (!res.ok) throw new Error(res.statusText)
      return res.json()
    })
  } catch (err) {
    unstable_rethrow(err)  // 내부 Next.js 에러면 다시 던져서 처리하게 함
    console.error(err)
  }
}
```

- 여기서 `unstable_rethrow(err)`는 함수 내부에서 이 에러가 Next.js에서 던져진 내부 에러이면 그냥 놔두고, 아니면 `catch` 블록에서 자체적으로 처리할 수 있게 해줘요.

---

### 왜 이렇게 쓰나?

- 보통 외부 API 요청 실패나 특정 조건에서 `notFound()`, `redirect()` 등 내부 Next.js 함수들을 사용해 상태를 바꾸고자 하는데,
- `try/catch`로 감싸면 Next.js 내부 에러도 같이 묶여서, Next.js 쪽에서 기대하는 렌더링이나 라우팅이 안 일어나고 말죠.

그래서 `unstable_rethrow`가 중간에 역할을 하면서 “Next.js 내부 에러만 원래대로 던져주고, 그 외에는 내가 직접 처리할게” 라고 구분할 수 있게 해줍니다.

---

### 참고 팁

- `unstable_` 접두사가 붙은 함수들은 아직 실험적 API라는 뜻이에요. 따라서 앞으로 Next.js 버전업 시 사용법이나 역할이 바뀔 수도 있습니다.
- 하지만 에러 핸들링에서 내부 Next.js 에러를 잘 구분해서 다루고 싶다면 굉장히 유용한 함수입니다.
- 실제 운영 환경에서는 주의해서 사용하되, 공식 문서와 버전별 변경사항을 꾸준히 확인하는 게 좋습니다.

---

기본 개념만 잘 이해해두면, Next.js 앱에서 다양한 에러 케이스를 우아하게 처리할 수 있으니 참고하세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서 `unstable_rethrow` API를 사용하면 내부적으로 발생한 에러를 다시 던져서(throw) Next.js가 알아서 처리하게 하면서, 코드의 예상 동작을 이어갈 수 있어요.

예를 들어, 어떤 게시글을 API에서 가져올 때 404 응답이 오면 `notFound()`를 호출해서 Next.js가 404 페이지를 띄우도록 하고, 그 외에 의도치 않은 에러가 발생하면 직접 에러를 던져줘야 하죠. 여기서 `unstable_rethrow`를 써보면:

```js
import { notFound, unstable_rethrow } from 'next/navigation'

export default async function Page() {
  try {
    const post = await fetch('https://.../posts/1').then((res) => {
      if (res.status === 404) notFound()       // 404일 땐 notFound 함수 호출
      if (!res.ok) throw new Error(res.statusText) // 그 외 에러면 강제로 에러 발생
      return res.json()
    })
  } catch (err) {
    unstable_rethrow(err)  // 에러 다시 던져서 Next.js가 처리하도록 위임
    console.error(err)     // 콘솔에도 에러 로깅
  }
}
```

여기서 중요한 점은 `notFound()`, `redirect()`, `permanentRedirect()` 같은 Next.js 내장 API들은 내부적으로 에러를 던지면서 라우팅을 조작합니다. 따라서 이런 API들을 사용할 때는 에러를 다시 던져주지 않으면 Next.js가 정상적으로 동작하지 않을 수 있어요.

| Next.js API          | 설명                                                         |
|----------------------|--------------------------------------------------------------|
| `notFound()`         | 404 페이지를 렌더링하도록 이동                                |
| `redirect()`         | 클라이언트 또는 서버에서 즉시 리다이렉트 수행                 |
| `permanentRedirect()`| 301 영구 리다이렉트를 수행                                     |

이 함수들이 에러를 던지는 이유는 Next.js가 라우팅 흐름을 제어하기 위해서인데요. 개발자가 이걸 잡아서 처리하려고 하면 오히려 흐름이 꼬일 수 있으니 `unstable_rethrow`를 이용해 원래에서 다시 던져주고 Next.js에게 맡기는 게 가장 깔끔합니다.

---

추가로, 이 `unstable_rethrow` API는 아직 실험적(unstable)이라서 Next.js 버전업에 따라 변경될 수 있으니 프로덕션 환경에서 쓸 때는 주의가 필요해요. 대신 이렇게 내부 오류를 재발생시켜서 Next.js가 상황에 맞는 UI(404 페이지나 리다이렉트 등)를 보여주게 하는 방식은 코드를 훨씬 깔끔하고 명료하게 만들어 줍니다.

아참, 에러를 잡고 바로 `unstable_rethrow`를 하면 아래 코드처럼 `console.error`가 무의미해질 수 있는데, 만약 로그를 남기고 싶다면 Next.js가 에러 처리 전에 로그를 찍을 수 있도록 주의하세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

라우트 세그먼트가 '정적(static)'이 아니면 에러를 던지도록 설정되어 있을 때, 동적 API 호출 역시 에러를 발생시킵니다. 이 에러는 개발자가 따로 잡아서 처리하면 안 된다는 점, 꼭 기억하세요. 참고로 Partial Prerendering(PPR)도 이런 동작에 영향을 줍니다. 

에러를 던지는 API는 다음과 같습니다:

| API 종류                          |
|----------------------------------|
| cookies                          |
| headers                          |
| searchParams                    |
| fetch(..., { cache: 'no-store' })        |
| fetch(..., { next: { revalidate: 0 } })  |

---

### 알아두면 좋은 점
- 에러를 다시 던질(unable_rethrow) 때는 catch 블록 맨 위에서 호출하며, error 객체를 유일한 인자로 넘겨줘야 합니다.
- .catch 핸들러 내에서도 사용할 수 있어요.
- 이런 API 호출을 try/catch로 감싸지 않는다면 unstable_rethrow를 쓸 필요가 없습니다.
- 만약 타이머나 인터벌 정리 같은 리소스 정리가 필요하다면, unstable_rethrow 호출 전에 하거나 finally 블록에서 처리해야 합니다.

---

실제로 이런 기능을 잘 활용하면, Next.js 같은 프레임워크에서 미리 렌더링되는(Prerendered) 페이지와 동적요소가 섞여 있을 때 발생하는 복잡한 에러 처리 로직을 간소화할 수 있어요. 특히 일부 API가 정적 컨텍스트에서만 동작하도록 제한하기 때문에, 개발자가 예상치 못한 동작에 빠지지 않도록 명확히 해두는 셈이죠.

추가 팁을 드리자면, 이런 특성을 이해하고 에러 처리 패턴을 세우면 팀 내 코드 리뷰 때도 “왜 여기서 try/catch를 안 썼냐” 같은 혼란을 줄일 수 있습니다! 그리고 무엇보다, 결국 네트워크 요청(fetch) 같은 부분에서 불필요한 에러를 재처리하지 않고 효율적으로 관리하는 데 큰 도움이 될 거예요.

Next.js 15에서 unstable_rethrow 사용 방법

# useLinkStatus

`useLinkStatus` 훅은 `Link` 컴포넌트의 pending 상태(즉, 네비게이션이 진행 중인 상태)를 추적할 수 있게 해줍니다. 이걸 활용하면 페이지 이동이 완료될 때까지 스피너나 텍스트 깜빡임 같은 인라인 시각적 피드백을 사용자에게 보여줄 수 있어요.

### 언제 쓸까?

| 상황                     | 설명                                                          |
|-------------------------|-------------------------------------------------------------|
| Prefetching이 꺼져 있거나  | Prefetch가 비활성화되어 있거나 진행 중이면 네비게이션이 잠시 막힙니다.   |
| 동적 라우트인데 `loading.js`가 없는 경우 | 목적지 라우트가 동적이고, 즉각적인 네비게이션을 도와줄 `loading.js` 파일이 없을 때 |

이렇게 네비가 바로 이루어지지 않을 때, `useLinkStatus`를 사용하면 유저 경험을 좀 더 부드럽게 만들어 줄 수 있답니다.

### 덧붙이는 팁!

- 동적 라우트에서 로딩 컴포넌트를 별도로 관리하는게 귀찮다면, `useLinkStatus`로 간단하게 네비바에 로딩 표시만이라도 넣어주는 게 꽤 효과적이에요.
- 네비게이션 동안 UI가 멈춘 것처럼 보이는 건 사용자 경험에서 큰 마이너스 포인트니까, 이런 작은 피드백도 신경 쓰는 게 중요합니다.

필요하다면 다음 글에서 실제 사용 예제도 가져와서 보여드릴게요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이번에 소개할 내용은 Next.js에서 링크가 눌렸을 때 로딩 상태를 쉽게 감지할 수 있는 `useLinkStatus` 훅에 대해 얘기해볼게요. 실제로 프로젝트에 적용하면 사용자 경험을 좀 더 부드럽게 만들어줄 수 있답니다.

### 코드 예제

먼저, 로딩 인디케이터를 보여주는 컴포넌트가 있어요. 링크가 클릭되고 나서 페이지가 로드 중일 때 동그란 스피너가 나타나도록 하는 간단한 코드입니다.

```js
'use client'

import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}
```

다음은 이 `LoadingIndicator` 컴포넌트를 활용해서 헤더 안에 링크와 함께 로딩 상태를 보여주는 예시입니다.

```js
import Link from 'next/link'
import LoadingIndicator from './loading-indicator'

export default function Header() {
  return (
    <header>
      <Link href="/dashboard" prefetch={false}>
        Dashboard <LoadingIndicator />
      </Link>
    </header>
  )
}
```

### 알아두면 좋은 팁

| 내용 | 설명 |
|-------|-------|
| `useLinkStatus`는 `Link` 컴포넌트 하위에 위치해야 사용 가능하다 | 훅이 제대로 상태 변화를 감지하려면 링크 컨텍스트 내부여야 해요 |
| `prefetch='false'`일 때 특히 유용 | 미리 페이지를 불러오면 로딩 상태가 안 보이기 때문에, 미리 불러오기 해제시 효과적이죠 |
| 이미 프리패치된 라우트라면 pending 상태가 건너뛰어진다 | 즉, 빠르게 로딩되는 경우엔 스피너가 안 띄워질 수 있어요 |
| 연속해서 여러 링크를 클릭하면 가장 마지막 클릭한 링크만 로딩 상태가 반영된다 | 사용자 입장에서 자연스럽고 깔끔하게 처리해주는 부분이죠 |
| 이 훅은 Pages Router에서는 지원하지 않는다 | 앱 라우터(app router) 전용 기능이라는 점 기억하세요 |

### 참고할 점

- `useLinkStatus` 훅은 사용자 클릭 후 네비게이션 상태를 실시간으로 감지할 수 있어서, ‘이 페이지 가려고 클릭했는데 지금 loading 중’이라는 걸 UI에서 바로 반영하기 좋아요.
- 동시에 여러 링크를 클릭하면서도 혼란 없이 마지막 링크의 로딩 상태만 보여주기 때문에, 사용자 경험이 매끄럽죠.
- 만약 Next.js 앱 라우터를 사용하는 중이고, 로딩 표시가 필요하다면 이 훅을 적극 활용해보세요.
- 반대로 기존의 Pages Router에서는 지원하지 않으니, 다른 방법을 찾아야 함을 잊지 마시고요!

사용할 때 간단히 `prefetch={false}` 옵션을 넣으면 그 링크가 클릭될 때만 실제 라우트를 불러와서 로딩 상태를 감지할 수 있어요. 미리 페이지를 불러오는 게 싫거나, 로딩 스피너를 정확히 보여주고 싶을 때 딱 좋답니다!

필요하다면 직접 CSS로 `spinner` 클래스를 만들어 돌리는 모양새를 구현해보는 것도 추천해요. 사용자에게 좋은 피드백을 주는 거니까요!

다른 궁금한 내용 있으면 언제든 질문 주세요~ 😊


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


```js
const { pending } = useLinkStatus()
```

`useLinkStatus`는 파라미터를 받지 않는 훅입니다.

## 반환값

`useLinkStatus`는 하나의 프로퍼티를 가진 객체를 반환하는데요, 그 프로퍼티는 다음과 같습니다:

| 프로퍼티명 | 설명                         |
|------------|------------------------------|
| pending    | 현재 링크 상태가 "대기 중"인지 여부를 나타내는 불리언 값 |

이 `pending` 값이 `true`면, 링크가 아직 처리 중이라는 뜻이고, `false`면 처리가 완료됐다는 의미입니다.

---

사실, 이런 상태 값은 UI에서 로딩 인디케이터를 표시하거나, 사용자 입력을 잠시 막아야 할 때 굉장히 유용하답니다.  
예를 들어, 버튼 클릭 후 페이지 전환이 완료될 때까지 로딩 스피너를 보여주고 싶을 때 쓰면 좋아요!  
작게라도 이런 사용자 경험(UX) 개선이 앱을 더 프로답게 만들어줍니다 :)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

아래는 `pending` 프로퍼티에 관한 내용을 좀 더 쉽게 설명한 내용입니다.

| Property | Type    | Description                         |
| -------- | ------- | --------------------------------- |
| pending  | boolean | 히스토리 업데이트 전에는 `true`, 업데이트 후에는 `false` |

`pending`은 주로 네비게이션이 아직 진행 중일 때 `true`가 되었다가, 네비게이션이 완료되면 `false`로 바뀌는 불리언 값이에요. 이걸 활용하면 사용자가 링크를 클릭했을 때, 네비게이션이 아직 끝나지 않았다는 시각적 피드백을 줄 수 있죠.

---

## 예제

### 인라인 로딩 인디케이터(loading indicator)

사용자가 어떤 링크를 클릭했을 때, 백그라운드에서 페이지가 로드되거나 데이터가 로딩되는 동안 아무런 표시가 없으면 좀 답답하잖아요? 그래서 `pending` 값을 확인해서 로딩 중임을 보여주는 인디케이터를 추가하는 게 UX 측면에서 좋아요.

예를 들어, React에서 `pending` 상태를 체크해서 텍스트 옆에 작은 로딩 스피너를 띄우는 식으로 활용할 수 있죠. 이렇게 하면 사용자는 클릭한 순간부터 변화가 느껴져서 기다림이 덜 지루해집니다.

---

실제로 이런 상태 관리와 사용자 피드백은 요즘 웹 개발에서 굉장히 중요한 부분이라서, 네비게이션 라이브러리나 데이터 페칭 라이브러리들에 `pending`, `loading` 같은 프로퍼티가 자주 등장해요. 여러분도 프로젝트에 적용할 때 꼭 고려해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이번에 소개할 내용은 Next.js에서 링크를 클릭했을 때 로딩 인디케이터를 자연스럽게 보여주는 방법이에요. 보통 페이지 이동이 느릴 때 로딩 스피너를 보여주면 좋은데, 너무 빨리 넘어가면 깜빡임처럼 느껴져서 오히려 UX가 떨어질 수 있거든요.

아래 코드를 보면, `useLinkStatus` 훅을 사용해서 현재 링크가 이동 중인지 (`pending`)를 체크해요. 링크가 이동 중일 때만 `<div role="status" aria-label="Loading" className="spinner" />`가 렌더링 돼서 로딩 인디케이터를 보여주죠.

```jsx
'use client'
 
import { useLinkStatus } from 'next/link'
 
export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}
```

그리고 메뉴바 컴포넌트에서는 각 링크 옆에 `LoadingIndicator`를 붙여서, 사용자가 클릭하면 이동 상태에 따라 스피너가 나타나요.

```jsx
import Link from 'next/link'
import LoadingIndicator from './components/loading-indicator'
 
const links = [
  { href: '/shop/electronics', label: 'Electronics' },
  { href: '/shop/clothing', label: 'Clothing' },
  { href: '/shop/books', label: 'Books' },
]
 
function Menubar() {
  return (
    <div>
      {links.map((link) => (
        <Link key={link.label} href={link.href}>
          {link.label} <LoadingIndicator />
        </Link>
      ))}
    </div>
  )
}
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <Menubar />
      {children}
    </div>
  )
}
```

여기서 한 가지 팁! 페이지가 아주 빠르게 로딩되면 로딩 인디케이터가 잠깐 깜빡이는 것처럼 보여서 사용자가 거슬릴 수 있어요. 이런 문제를 해결하는 방법은 로딩 인디케이터에 '딜레이'를 주는 겁니다. 예를 들어 100ms 정도 딜레이를 주고, 처음에는 투명도 opacity를 0으로 시작해 서서히 보이도록 하면 훨씬 자연스러워져요.

간단한 예시 CSS를 보여드리면:

```css
.spinner {
  opacity: 0;
  transition: opacity 0.3s ease;
  animation-delay: 100ms; /* 딜레이 설정 */
  animation-fill-mode: forwards;
  /* spinner 스타일 추가 */
}
.spinner.visible {
  opacity: 1;
}
```

그리고 로딩 상태가 시작되고 딜레이가 지난 후에 `visible` 클래스를 붙여서 보이도록 조절하면 됩니다.

---

### 요약

| 문제점                   | 해결법                                                  |
|-----------------------|-----------------------------------------------------|
| 로딩 인디케이터가 너무 빨리 깜빡임 | 처음 보여주기 전에 100ms 정도 딜레이를 주고 opacity 0에서 시작하여 자연스럽게 나타나도록 함 |

사실 이런 작은 UX 개선이 사용자 경험에 큰 차이를 만든답니다. 여러분도 Next.js 앱에서 로딩 인디케이터를 쓸 땐 이런 딜레이 기법을 한 번 적용해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이 CSS 코드는 간단한 로딩 스피너 애니메이션을 만드는 예제예요. 

```css
.spinner {
  opacity: 0;
  animation:
    fadeIn 500ms 100ms forwards,
    rotate 1s linear infinite;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
```

- `.spinner` 클래스는 처음에 투명도(opacity)가 0으로 설정되어 있어요.
- `fadeIn` 애니메이션은 500ms 동안 100ms 딜레이 후에 투명도가 0에서 1로 변하며 나타나게 해주고요.
- `rotate` 애니메이션은 1초 동안 회전을 계속 반복하도록 설정되어 있어, 스피너가 빙글빙글 도는 것처럼 보이게 합니다.

여기서 중요한 점은 두 애니메이션을 동시에 적용했기 때문에, 페이드인하고 나서 스피너가 계속 회전하는 동작이 자연스럽게 연결된다는 거예요.

---

간단하게 이 애니메이션을 HTML에 적용하는 법도 알려드릴게요.

```html
<div class="spinner">
  
</div>
```

그리고 스피너의 크기나 모양을 CSS로 더 커스터마이징하는 것도 가능하니, 필요에 따라 조절해 보세요.

---

또한 최신 브라우저들은 애니메이션 성능을 최적화해주지만, 너무 많은 애니메이션을 한꺼번에 적용하면 CPU 사용량이 늘 수 있으니 주의하세요!

---

이제 표 정보도 Markdown 형식으로 바꿔서 보여드릴게요:

| Version  | Changes                  |
|----------|--------------------------|
| v15.3.0  | `useLinkStatus` introduced. |

`useLinkStatus`가 뭔지 궁금하다면, 다음에 자세히 다뤄볼게요! 지금은 CSS 애니메이션과 함께 잠깐 살펴봤어요. 도움이 되셨길 바랍니다!

ReactJS에서 useLinkStatus로 현재 링크 상태 쉽게 확인하는 방법

# unstable_noStore

Next.js 15 버전에서는 더 이상 `unstable_noStore`를 권장하지 않고, 대신 **`connection`**을 사용하길 추천해요.

`unstable_noStore`는 정적 렌더링(static rendering)을 명시적으로 제외하고, 특정 컴포넌트를 캐시하지 않도록 표시하는 데 사용됐어요.

아래 예제처럼 사용했었죠:

```js
import { unstable_noStore as noStore } from 'next/cache';

export default async function ServerComponent() {
  noStore();
  const result = await db.query(...);
  ...
}
```

---

## 조금 더 풀어서 설명하자면

- **`unstable_noStore`** 는 이름에서 알 수 있듯이 아직 완전히 안정화되지 않은 API예요. 이 기능을 사용하는 컴포넌트는 정적 HTML로 빌드할 때 캐싱에서 빠지게 되고, 항상 새로 데이터를 불러와야 하는 상황에서 유용했어요.
- 하지만 Next.js 15 버전부터는 새로운 접근법인 `connection` API가 등장하면서, 캐시 관련 처리를 더 명확하고 안전하게 할 수 있게 되었답니다.

## 요즘에는 어떻게 할까?

Next.js 앱을 작성하면서 특정 데이터 요청이 매번 새로워야 하거나, 캐시를 끄고 싶다면, 이제 `connection` 방식을 적극 활용해 보세요!

예를 들어, 서버 컴포넌트 안에서 데이터베이스의 연결을 관리한다면, `connection`을 이용해 상태를 안전하게 유지하며 최적화할 수 있답니다.

---

## 정리

| 기능                       | 이전 방식 (`unstable_noStore`)                 | 권장 방식 (`connection`)             |
|---------------------------|----------------------------------------------|----------------------------------|
| 캐시 사용 여부 제어         | `noStore()` 호출로 캐시 제외                     | `connection` API로 명확하게 연결 관리      |
| 안정성                     | 불안정한 API                                    | 안정화된 새 API                     |
| Next.js 버전 권장 사항        | 15 이전 버전에서 사용                            | Next.js 15 이상에서 사용 권장            |

---

Next.js의 캐시 처리 방식은 점점 발전하고 있으니, 공식 문서와 릴리즈 노트를 꾸준히 체크하면서 최신 방식을 따라가는 게 좋아요!  
궁금한 점이나 더 알고 싶은 부분 있으면 언제든 알려 주세요 :)


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

> 알아두면 좋은 점:  
unstable_noStore는 fetch의 cache: `no-store`와 동일한 기능을 합니다.  
unstable_noStore가 export const dynamic = `force-dynamic`보다 더 선호되는 이유는, 컴포넌트 단위로 더 세밀하게 적용 가능하기 때문입니다.

- 참고로, unstable_noStore를 unstable_cache 내부에서 사용한다고 해서 static generation에서 벗어나는 건 아닙니다. 대신 캐시 설정을 따라 결과를 캐싱할지 결정하게 됩니다.

## 사용법

fetch 함수에 cache: `no-store` 옵션이나 next: { revalidate: 0 }와 같은 추가 옵션을 전달하기 번거로울 때, 혹은 fetch가 지원되지 않는 상황에서는 noStore() 함수를 대신 사용할 수 있습니다. 이 함수가 위 옵션들의 대체재 역할을 해 준답니다.

---

### 추가 팁

Next.js에서 static generation과 dynamic rendering은 성능과 개발환경에 큰 영향을 끼치죠. 캐시 설정을 잘 이해하면 불필요한 데이터 호출을 줄여서 UX도 개선할 수 있어요.

`unstable_noStore`를 각 컴포넌트에 유연하게 적용하면, 페이지 전체가 아닌 특정 부분만 최신 상태로 유지하는 전략을 세우기 좋습니다.  
따라서, 데이터가 자주 바뀌는 UI 부분에는 `unstable_noStore`를, 정적인 부분에는 기본 캐싱을 적용하는 하이브리드 방식을 추천해요.

앞으로 Next.js를 쓰면서 API 호출 최적화를 고민할 때 한 번 참고해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
import { unstable_noStore as noStore } from 'next/cache';

export default async function ServerComponent() {
  noStore();
  const result = await db.query(...);
  ...
}
```

## 버전 히스토리

| 버전        | 변경 내용                                  |
|-------------|-----------------------------------------|
| `v15.0.0`   | `unstable_noStore`가 더 이상 권장되지 않고 `connection`으로 대체됨. |
| `v14.0.0`   | `unstable_noStore`가 새롭게 도입됨.                |

---

위 코드는 Next.js에서 `unstable_noStore`라는 기능을 사용하는 예제입니다. 이 함수는 서버 컴포넌트에서 캐시 저장을 방지하는 역할을 해주는데요, 데이터베이스 쿼리처럼 매번 최신 데이터를 받아와야 할 때 유용합니다.

하지만 `v15.0.0` 버전부터는 `unstable_noStore` 대신 `connection` API로 대체되었으니, 최신 버전을 사용한다면 해당 부분을 업데이트 하는 것이 좋겠죠. `unstable_` 접두어가 붙은 함수들은 실험적 기능이라 버전 업그레이드 시 변경 가능성이 있으니, 사용 시 주의해야 합니다.

참고로, Next.js의 이런 캐시 관련 기능들은 서버 컴포넌트와 클라이언트 컴포넌트의 데이터 관리 방식을 효율적으로 하기 위한 것으로, 서버에서 데이터를 가져올 때 얼마나 캐시를 활용할지 세밀하게 조절할 수 있게 해줍니다. 특히 데이터 신선도가 중요한 서비스라면 이런 기능을 잘 활용해보시길 추천드려요!