useSearchParams | Next.js 13 app router (간단함)

제로초 강의를 듣다가 정확히 이해가 되지않아서 next의 공식문서를 찾아본 결과이다. 

 

'useSearchParams'는 클라이언트 사이드 훅인데, 현재 url의 쿼리 스트링을 알 수 있게 해준다. 

 

아래의 예시가 참 잘 되어있다. 

- 문법은 get(' ')을 반드시 사용해야한다. 

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</> // Search: my-project
}

1. 'useSearchParams' 훅을 불러온다.

 

2. search라는 변수에 가져온 값을 담는다. 

 

3. 현재 url: `/dashboard?search=my-project` 에서 search 쿼리를 찾으면 그 해당 글자인 'my-project'가 결과값으로 도출된다. 

 

4. 적재적소에 가져다 쓴다. 

 

 

[참고] 

Functions: useSearchParams | Next.js

 

 

 

---------------------------------------------------------------