[Next.js] Context API, usePathname, useSearchParams, params

Context API

• Provider.tsx 파일에서 context api 적용 가능
  • client component에서만 사용 가능

import {createContext} from "react"

createContext({
변수명 : 값,
})

ex) 

export const TabContext = createContext({
tab : "rec",
setTab : (value:"rec" | "fol") => {

}
})

export default function TabProvider() {
const [tab, setTab] = useState("rec")

return <TabContext.Provider value={{tab, setTab}}>
	{children}
</TabContext.Provider value={{tab, setTab}}>
;
}

이후 적용할 영역을 감싸주면 됨

usePathname

• next/navigation의 메서드, 현재 경로를 가져와 줌

const pathname + usePathname(); -> /부터 ? 앞까지의 전체 경로를 가져옴

ex) pathname === "/explore"

useSearchParams

• 쿼리스트링의 데이터를 가져와 줌
  • 기본적으로 prop으로 들어있음

export default function Page({searchParams}:{
searchParams : {이름 : 타입, 이름 : 타입, ...}
}){

}

or

const searchParmas = useSearchParams();
-> searchParams.get('이름')
-> searchParams.toString() // 기존에 있는것들을 다 쿼리스트링 형식으로 넣어줌

params

• useSearchParams와 비슷, 기본적으로 지원 해줌
  • props.params.이름 으로 접근 가능