리액트 라우터 - useNavigate

useNavigate

사용방법

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

1. react-router-dom으로부터 useNavigate를 import 해온다.

const navigate = useNavigate();

1. useNavigate를 호출하면 양식이 제출된 후 프로그래밍 방식으로 탐색할 수 있는 함수를 반환한다고 공식문서에 나와있는데 이것을 변수에 담는다.

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.
  반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다.
  조건이 필요한 곳에서 navigate 함수를 호출해서 경로를 이동할 수 있다.
  ex) 로그인 페이지에서 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭했을 때 다른 페이지로 이동할 때

Link 컴포넌트와 useNavigate의 차이

Link 컴포넌트는 라우터 내에서 직접적으로 페이지 이동을 하고자 할 때 사용되는 컴포넌트이다.

import React from 'react';
import {Link} from 'react-router-dom';

function Nav(){
  return (
    <div>
      <Link to='/'> Home </Link>
      <Link to='/about'> About </Link>
    </div>);
}

export default Nav;

위와 같은 방식으로 간단하게 to 속성에 경로를 넣어주는 방식으로 사용한다!

Link 컴포넌트는 다음과 같은 특징을 갖는다.

1. Relative

• 계층 구조에 상대적이다.
• 상대 경로 표현이 가능하므로, ./.. 과 같은 표현도 사용이 가능하다.

2. preventScrollReset

• 페이지 중간에 있는 컨텐츠 내부에서 tab 목록을 누르는 것과 같은 시도를 할 때, 기존의 Link 컴포넌트였다면 클릭 시 스크롤이 초기화되어 페이지 가장 위로 이동하게 된다.
• 그러나 이 속성을 true로 설정해주면 이를 방지할 수 있다!!

3. state

• useLocation 훅과 연계하여 특정 state를 넘겨주는 것도 가능하다.

<Link to="new-path" state={{ some: "value" }} />let { state } = useLocation();

Link는 a태그로 이루어져 있지만, 자체적으로 컴포넌트의 상태를 유지하거나, 화면 전체 리렌더링을 방지하는 등의 기능이 포함된 a 태그의 상위 버전이라고 생각하면 좋을 것 같다!!

Link state 정리

Route태그 path에 파라미터로 넘기는 방법 말고, Link 태그 state로 값을 넘길 수 있다.

<Route path='/list' element={<WebBoardList />}></Route>
<Link to=”라우트에 등록된 경로” state={{'데이터':데이터}}></Link>

참고 : https://velog.io/@ahn-sujin/React-Link-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-useNavigate%EC%9D%98-%EC%B0%A8%EC%9D%B4