react 에서 navigate 사용하기 (useNavigate / Navigate)

그루트·2022년 9월 5일
1
post-thumbnail


🤙 Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다.



1. useNavigate 쓰기


useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공합니다.

이렇게 작성한다고 합니다. 이 코드에서의 url이 www.naver.com 이었다면 이는 www.naver.com/comment/id... 으로 바뀌었을 것입니다.

useNavigate에는 두 가지 특징이 있습니다.


(1) useNavigate의 인자들

navigate("../success", { replace: true});

첫 번째 인자로는 주소를 받으며 두 번째 인자로 { replace, state } 인수를 사용합니다.

  • replace (true or false)

true를 사용한다면, navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않습니다. 이 때는 자신의 메인 페이지 ("/")로 돌아오게 됩니다. false는 뒤로가기가 가능하며 이 것이 기본 값인 듯합니다.

  • state (any)

state가 필요하다면 사용할 수 있다고 합니다만... 저는 어떻게 사용하는지도 잘 모르겠고 제대로 알 수 있는 방법도 없더군요...ㅜ


(2) useHistory의 기능도 포함

useNavigate는 react v6 에서 useHistory 가 변화한 것입니다. 이 때 useHistory 에서 사용하던, window의 history 를 이용한 navigate 기능도 할 수 있게 되었습니다.

History란 세션 기록(페이지 방문 기록)에 대한 접근 방법과 메서드를 제공하는 것입니다. 또한 세션(session)이란 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법을 의미하지요.


2. Navigate 쓰기


Navigate 요소는 렌더링될 때 현재 위치를 변경합니다. useNavigate를 둘러싼 component wrapper 이며 props와 동일한 모든 인수를 허용합니다. 이 태그 역시 to, replace, state 를 모두 사용할 수 있습니다.

Note: This API is mostly useful in React.Component subclasses that are not able to use hooks. In functional components, we recommend you use the useNavigate hook instead.
-참고 : 이 API는 대부분 후크를 사용할 수 없는 React.Component 하위 클래스에서 유용합니다. 기능적 구성 요소에서는 대신 useNavigate 후크를 사용하는 것이 좋습니다.-

라고 공식 홈페이지에서는 얘기합니다. 하위 클래스를 위해서 유용하게 쓰이는 것이기 때문에 엥간해서는 useNavigate를 쓰라고 하는 것 같습니다.


< 출처 >

[React] react-router-dom v6 업그레이드 되면서 달라진 것들 (https://velog.io/@soryeongk/ReactRouterDomV6)

navigate 공홈 (https://reactrouter.com/docs/en/v6/api#navigate)

useNavigatge 공홈 (https://reactrouter.com/docs/en/v6/api#usenavigate)

profile
i'm groot

0개의 댓글