[React] React Router DOM: Link 태그와 useNavigate의 차이

🍎 React-Router를 사용하는 이유

 

프로젝트를 진행하면서 React Router Dom을 사용하면 React 애플리케이션 내에서 페이지 간 이동을 쉽게 구현할 수 있다.

기존 <a>태그를 사용할 경우, 페이지 전체가 새로 로딩된다.

이는 화면 깜빡임이 필수적으로 발생하고, 이는 사용자 경험을 떨어뜨릴 수 있다!

 

React-Router를 사용하면, 라우팅을 통해 부드러운 화면 전환이 가능해진다.

즉, SPA 사용자 경험 향상을 위해 React Router를 사용하는 것이다.

 

Router의 종류에는 HashRouter, BrowserRouter가 있다. 

나는 주로 BrowserRouter를 사용하여 개발을 해왔다.

 

+) 이전에 하루네컷 서비스를 진행할 때, 배포 후 로그인 기능에서 리다이렉트가 안되는 문제를 해결하기 위해 HashRouter로 코드를 수정해 본 적이 있다.(아래 포스팅 참고해서) 비록 문제는 다른 곳에 있었지만,,,

https://velog.io/@zh025700/gh-pages-%EB%B0%B0%ED%8F%AC%EC%97%90%EC%84%9C-kakao-login-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

gh-pages 배포에서 kakao login 사용하기

 

 

어쨌든, 다시 본론으로 돌아가면, React Router Dom을 통해 페이지 이동을 구현할 때 사용하는 방법에는 두 가지가 있다.

1. Link 태그

2. useNavigate

 

프로젝트를 통해 두 가지 모두 경험해봤지만, 왜 해당 방법을 쓰는지 깊게 생각해보지는 않았다. 아래 내용부터는 둘의 차이점을 중점적으로 다루어보려고 한다.

 

 

🍎 Link 태그

Link 태그는 HTML의 a 태그와 유사하지만, 페이지 전체를 다시 로드하지 않고도 클라이언트 측에서 페이지를 전환할 수 있게 해준다. 

사용자 인터페이스 안에서 링크를 만들어, 사용자가 클릭했을 때 다른 페이지로 이동할 수 있다.

 

예시 코드는 아래와 같다!

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;

const App = () => {
  return (
    <Router>
      <div>
              <Link to="/">Home</Link>
              <Link to="/about">About</Link>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

 

🍎 useNavigate 훅

useNavigate 훅은 프로그래밍 방식으로 페이지 전환을 제어할 수 있게 해준다.

이 훅은 함수 컴포넌트 내에서 다른 페이지로 이동하는 기능을 구현할 때 유용합니다.

예를 들어, 버튼 클릭 이벤트 핸들러나 기타 논리적 조건에 따라 페이지를 전환하고자 할 때 사용할 수 있다.

 

예시코드는 아래와 같다.

import React from 'react';
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();
  
  const goToAboutPage = () => {
    navigate('/about');
  };
  
  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToAboutPage}>Go to About Page</button>
    </div>
  );
};

const About = () => <h2>About Page</h2>;

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

 

 

🤔 차이점 정리

	Link 태그	useNavigate 훅
사용 용도	Link 태그는 사용자 인터페이스(UI)에서 하이퍼링크를 만드는 데 사용된다. 즉, 웹 페이지에서 직접 사용자가 클릭할 수 있는 링크를 생성할 때 사용	프로그래밍 방식으로 페이지 전환을 제어하는 데 사용된다. 즉, 링크를 클릭하는 대신 코드 내에서 특정 조건이나 이벤트에 따라 페이지를 전환할 수 있다!
사용 방법	JSX 내에서 링크를 만들 때 사용	함수 컴포넌트 내에서 다른 페이지로 이동하는 로직을 구현할 때 사용
장점	단순하고 직관적이며, 사용자 인터페이스에서 링크를 쉽게 추가할 수 있음	동적인 네비게이션 로직을 구현할 수 있어 다양한 조건에 따라 페이지 전환을 제어할 수 있다.