본문 바로가기
React/Next.js

Next.js | await, dynamic route, useParams(), useRouter

by 2yy 2023. 4. 27.

[await]

- js는 처리가 느린 코드를 발견하면 기다리지 않고 다음줄을 실행함
- await 키워드를 붙이면 해당 코드를 실행할 때까지 기다려줌
- Promise 리턴하는 코드만 await 붙이기 가능

 

[dynamic route]
- 다이나믹 라우트 만드려면 [폴더명] 으로 작명
ex) /detail/[abc]/page.js 이렇게 만들어 놓으면 /detail/(아무문자)로 접속했을 때 page.js를 보여줌

 

[유저가 URL에 입력한 내용 가져오기]
- page.js 컴포넌트에 파라미터를 등록해두면 [...] 자리에 유저가 입력한 내용을 props 변수에 자동으로 담아줌
- [...] 자리에 유저가 입력한 내용을 'URL 파라미터'라고 함
- dynamic route로 만든 URL에 적은 문자를 가져오고 싶으면 컴포넌트에서 params를 출력

 

[useRouter]
- client component에서만 사용 가능
- 뒤로가기는 router.back()
- 앞으로가기는 router.forward()
- 새로고침은 router.refresh() (소프트 새로고침, 변동사항이 있는 일부분만 바꿔줌)
- 페이지 미리로드는 router.prefetch('경로'), <Link>에도 prefetch 기능 내장되어 있음
- 현재 URL 출력은 usePathname()
- Search parameter 출력은 useSearchParams()
- 유저가 [dynamic route] 입력한 것 출력은 useParams()

 

* 1. 여러 페이지 만드려면 [Dynamic Route]
   2. 현재 URL이 궁금하면 props/useRouter
   3. 페이지 이동, prefetch 등은 useRouter