[1] router 설명

페이지들을 연결하고 페이지의 히스토리를 기록하면서 페이지들끼리 이동을 하게 해준다.

[2] Static Router

url이 고정되어 입력하면 똑같은 페이지를 보이게 한다.

[3] Dynamic Router

게시판, 상품정보 등 일일이 모든 페이지를 만들 수 없을 때 동적 라우터를 이용한다.

example.product/1 , example.product/2, example.product/3 ...
와 같이 상품이 10만개이면 개발자가 10만개의 페이지를 가각 만드는 것은 말도 안되는 소리이다.
이럴 때 뒤에 붙는 1,2,3,...100000이라는 숫자를 변수로 받아서 처리할 수 있는 방식이다.

nextjs에서는 []괄호를 이용해서 다이나믹 라우팅을 사용하고 react-router-dom v6에서는 useSearchParams이나 쿼리 스트링 등을 이용해서 구현하는 것 같다.

[4] router 메소드

(1) router.push("url경로")

다른 페이지로 이동시키는 메소드이다. 히스토리에 스택(경로)을 추가하면서 이동을 해서 뒤로가기를 사용하면 이전 페이지로 돌아갈 수 있다.

(2) router.replace("url경로")

다른 페이지로 이동하는 같지만 히스토리에 스택(경로)가 쌓이지 않는다.

(3) router.back()

이전 페이지로 돌아가는 방법이다.

• 많은 기능이 존재하지만 push나 back을 주로 많이 사용하는 것 같다.