Link와 useNavigate(useHistory)의 차이

zzwwoonn·2022년 6월 28일
2

React

목록 보기
22/23

리액트에서 화면 전환(이동)을 할 때 사용하는 방법은 크게 2가지로 Link(Routes) 를 이용하는 방법과 useNavigate 를 이용하는 방법이 있다.

Link는 실제로 썼던 코드를 이용해서 살펴보자.

React(리액트)는 SPA(Single Page Applicatoin)이다. 말그대로 페이지(Page)가 하나(Single)인 어플리케이션(Application)이다. 이렇게 페이지가 하나이기 때문에 페이지 이동이 불가능하다. 하지만 이렇게 페이지가 하나인 경우에도 일반 웹 사이트처럼 URL에 따른 페이지 이동을 할 수 있게 해주는 기능이 React Router이다.

첫 번째 방법은 Link 컴포넌트를 사용하는 방법이다. 특정 버튼을 클릭 시 바로 이동하는 로직 구현 시에 사용이 용이하다.
react-router-dom 에서 제공하는 Link 컴포넌트는 DOM 에서 a 태그로 변환된다. 이런 a 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동을 시켜준다.

< a 태그와 Link 차이 >
a : 외부 프로젝트로 이동하는 경우
Link : 프로젝트 내에서 페이지 전환하는 경우

위의 사진은 React를 공부하면서 만들고 기록해둔 React Web 이다.

React Web

페이지의 윗 부분에 있는 헤더(Header.jsx)에서 하나의 카테고리를 골라 클릭하면 페이지가 이동이 되는 것을 볼 수 있다.

UseNavigate

react-router 버전이 5에서 6으로 바뀌면서 UseHistory 가 UseNavigate로 바뀌었다. 기능은 거의 동일해 보인다.

useNavigate() 로 페이지를 이동하면서 파라미터 전달하기

  1. useNavigate() 훅(Hook)으로 navigate 함수를 가지고 온다.
  2. navigate() 함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state 속성에 파라미터를 넣어준다.
    => navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) 

useLocation() 으로 넘겨준 파라미터 받기

  1. useLocation() 훅으로 location을 받는다.
  2. locaiton.state 로 전달 받은 파라미터를 쓸 수(접근) 있다.
    => location.state.키

0개의 댓글