✏️ React의 Link, useNavigate

 

오늘은 링크를 타고 이동하는 훅들에 대해서 공부를 해보았다.

`Link`태그와 `useNavigate`훅에 대해서 알아보도록 하자!

 

 

 

들어가기 전에!

`useNavigate`훅은 react-router-dom에서 제공해 주는 hook이기 때문에

사용하려면 react-router-dom을 설치 해야 한다.

npm i react-router-dom
//또는
yarn add react-router-dom

 

 

 

---

 

Link 태그

 

사용자가 클릭해서 페이지를 이동할 때 사용한다.

하이퍼 링크 텍스트나 페이지를 이동할 때 사용한다.

클릭시 바로 이동하는 로직 구현할때 쓴다고 생각하면 된다!

`html`의 `a`태그라고 생각하면 편하다.

`nav`나 `aside menu`등에서 사용한다.

 

 

사용예시

<Link to="/main">메인으로 이동하기</Link>

 

 

 

 

하지만 Link태그에서도 아래 예시처럼 데이터를 보낼 수 있다.

<Link to={`/main`} state={{ test: "hello world" }} >
   test
</Link>

 

---

 

useNavigate hook

useNavigate는 웹 페이지 이동 시 추가적인 로직이 필요할 때,

단순히 페이지만 이동시키는게 아닌, 특정한 코드의 실행이 끝나고 페이지를 이동시킬 때 사용하게 된다.

대부분 특정 액션이 있을 때 쓴다고 생각하면 편하다.

ex) 로그인 버튼을 클릭할 때
회원가입 되어 있는 사용자는 메인페이지로 이동한다.
회원가입이 되어 있지 않은 사용자는 회원가입 페이지로 이동한다

ex) 회원가입 후 제출 버튼을 클릭했을 때
로그인 페이지에서 로그인을 완료한 뒤, 처음 진입했던 페이지로 돌아간다.
회원가입을 하고 정보를 담아 로그인 페이지로 이동한다.

ex) 결제하기 버튼
쇼핑몰에서 결제하기 버튼을 누르고, 모든 결제가 완료된 후 페이지를 이동시킨다.
쇼핑몰에서 장바구니에 담기를 눌렀을때 현재 정보를 담고 장바구니 페이지로 이동시킨다.

 

 

 

 

 

사용예시

import { useNavigate } from "react-router-dom";

 

최상단에 import로 useNavigate 훅을 불러온다.

 

 

 

 

const navigate = useNavigate();

 

그리고 컴포넌트에 useNavigate훅을 불러온다.

 

 

 

 

  <button onClick={onClickDeleteButton}>삭제</button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        뒤로가기
  </button>

 

사용하고자 하는 곳에 `navigate("링크URL");` 을 넣어준다.

 

 

 

 

 

함수 안에서 사용할 때 예시

  const onClickDeleteButton = () => {
    const newExpenses = expenses.filter((item) => item.id !== id);
    setExpenses(newExpenses);
    navigate("/");
  };

 

삭제 버튼을 예시로 들어보자.

사용자가 삭제 버튼을 클릭했을 때, 함수가 실행이 되면서 실행로직이 진행 된 후

navigate로 메인페이지로 이동시킨다.

 

 

 

 

한번 더 나아가보자!

두 번째 인자로 이동시킬 페이지에 함께 보낼 데이터를 지정할 수 있다.

const Home = () => {
  navigate("/main", {
    state: {
      userId: user.id
    }
  });
};

 

이렇게 데이터를 보낼 때, 두번째 인자는 `state` 속성으로 보내야 한다.

 

 

 

 

 

또한 두번째 인자로 state 뿐만 아니라, `replace`속성도 보낼 수 있다!

import { useNavigate } from 'react-router-dom'; 

const navigate = useNavigate();

const Home = () => {
  navigate("/main", {replace: true});
};

 

기본값은 `false`로 되어있고, `true`로 되어있으면 페이지가 이동한 뒤,

뒤로가기를 하더라도 방금 페이지로 돌아올 수 없고 `root`로 돌아오게 된다.

`false`는 뒤로가기가 가능하다.

 

 

 

---

 

 

Link태그와 useNavigate의 차이점이 뭔데?

어떠한 조건이 있냐, 없냐에 따라서 중요한 차이점이 있다.

`Link`태그는 단순히 조건 없이 누르면 해당 페이지로 이동하는 것이고,

`useNavigate` 훅은 정보를 가지고 어떤 조건이 포함되어 있을 때 사용한다.

 

회원가입창을 예시로 들어보면 회원가입하기 버튼은 어떠한 조건이 없으므로 `Link`태그를 사용하는 것이 적합하다.

또는 회원가입폼을 작성한 뒤, 사용하는 `회원가입 완료` 버튼은 조건의 정보를 가지고 있으니 `useNavigate` 훅을 사용한다!