window.location.href vs useNavigate vs Link

 

  

window.location.href vs useNavigate

 

useNavigate

history모듈에 의존성을 가지고 있고, 이걸로 라우팅을 지원한다.

HTTP요청을 새로 하지 않고 안의 내용만 바꾼다.
* 뒤로가기버튼을 클릭해도 페이지가 unload되지 않고 내용만 바뀐다.

 

 

location.href

페이지를 전환하면 HTTP요청을 새로 한다.
* 뒤로가기를 클릭하면 페이지가 unload되고 새로운 페이지를 불러온다.

 

 

Link vs useNavigate

 

useNavigate

• navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있습니다.
• 함수 호출을 통해 이동하기 때문에, 이동할 때 조건을 걸 수 있습니다.
  ex) 로그인이 되어있는 사용자가 My 버튼을 눌렀을 때 -> My page,
    로그인이 안되어 있는 사용자가 My 버튼을 눌렀을 때 -> SignUp page 로이동 

Link

• Link 컴포넌트는 DOM 에서 a 태그로 변환이 되서 지정한 경로로 바로 이동을 시켜줍니다. 

 

 

 

 

참고

https://velog.io/@seokkitdo/React-Link-useNavigate

https://velog.io/@hyunheal/%EB%9D%BC%EC%9A%B0%ED%8C%85%EC%9D%98-%EC%B0%A8%EC%9D%B4