인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

페이지 컴포넌트가 클라이언트 컴포넌트인 상황에서는 useSearchParams와 useParams라는 hook을 사용해 값을 불러오실 수 있습니다 😃

useSearchParams는 서치파라미터(쿼리스트링)을 불러오는 동작을 하구요 아래와 같이 사용하실 수 있습니다.

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
  const search = searchParams.get('search')

  return <>Search: {search}</>
}

useParams는 URL 파라미터를 불러오는 동작을 합니다. 아래와 같이 사용하실 수 있어요

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()
  console.log(params)
 
  return '...'
}