React router Link, useNavigate 차이점

React router

! 6버전 기준으로 정리

---

리액트 라우터 6 설치

yarn add react-router-dom@6

---

Link, useNavigate

리엑트 라우터를 이용해 페이지 이동 방법에는 2가지가 있다

1. Link 사용
2. useNavigate Hook 사용(옛날의 history)

두 기능의 차이점과 활용 방법에 대해 조금 더 알아보자

---

Link

• Link 컴포넌트를 사용해 라우터에서 설정한 경로로 이동

• Link 컴포넌트는 DOM 에서 a 태그로 변환됨

• <a>태그와 같은 개념이나, 리액트 프로젝트 내에서 페이지를 전환한다는 것이 차이점
  ( <a>는 외부 프로젝트 링크로 연결시키는 목적으로 사용 )

• 클릭 시 바로 이동하는 로직 구현 시에 유용

  ex) 제품 목록 -> 제품 상세 페이지로 이동 시

import { Link, Route, Routes } from 'react-router-dom';
import Posts from './components/Posts'
import Users from './components/Users'

function App() {
  return (
    <div>
        <Link to="/posts">Posts</Link> | {" "}
        <Link to="/users">Users</Link>
      <Routes>
        <Route path="posts" element={<Posts/>}/>
        <Route path="users" element={<Users/>}/>
      </Routes>
    </div> 
  );
}

export default App;

---

useNavigate

• 주소 이동을 위한 Hook

• hook 실행 시 페이지 이동을 할 수 있게 해주는 함수 반환

• 반환 함수를 변수 navigate에 저장 후 인자로 path값을 넘겨주면 라우터에서 설정한 경로로 이동

• 옵션으로 replace, state설정 가능
  ( replace: 이동하면서 접근 이력 유지 여부 선택, state: 이동과 함께 전달하려는 값)

• 함수 호출을 통해 페이지를 이동한다는 것이 특징
  (특정 조건을 충족하거나, 특정 행동 시 페이지 이동하도록 설정)

• 페이지 전환 시 추가로 처리할 로직이 있을 경우 사용

  ex) 로그인 버튼
  -> if 회원가입한 사용자가 로그인 성공시 -> 메인 페이지로 이동
  -> if 회원가입 사용자가 아니면 -> 회원가입 페이지로 이동

import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom';

function PostDetail() {
  const location = useLocation();
  const navigate = useNavigate();
  const { post } = location.state ? location.state : { post:'' }

  if (!post) return <p>Not Found</p>
  return (
    <div>
        { post.title }
        { post.body }
        <button onClick={ () => navigate("/users", 
                          {replace: true, 
                          state: {data: 1}
                          })
                        }>유저페이지로 이동</button>
    </div>
  )
}

export default PostDetail

• useLocation을 이용해 데이터를 받는다

import React from 'react'
import { useLocation } from 'react-router-dom';
import { userData } from '../../constants/userData'

function Users() {
  const location = useLocation();

  return (
    <div>
      Users
      { location.state && location.state.data }
    </div>
  )
}

export default Users