Next.js 실전: 검색 기능 (useSearchParams)

SEARCH WITH URL PARAMS

'use client'
import { useSearchParams, useRouter } from 'next/navigation'
export default function SearchBar() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const q = searchParams.get('q') || ''
  const handleSearch = (v: string) => {
    const params = new URLSearchParams(searchParams)
    v ? params.set('q', v) : params.delete('q')
    router.push(`?${params}`)
  }
&nbsp;&nbsp;return <input value={q} onChange={e => handleSearch(e.target.value)} />
}