React에서 Link 태그와 useNavigate 훅의 차이점

 

리액트에서 네비게이션을 구현할 때 많이 사용하는 방법으로 Link 태그와 useNavigate 훅이 있습니다. 이 두 가지 방법은 모두 페이지 간의 이동을 가능하게 하지만, 그 사용 방법과 용도가 약간 다릅니다. 이번 글에서는 Link 태그와 useNavigate 훅의 차이점에 대해 간단한 예제와 함께 설명해 보겠습니다.

 

Link 태그

Link 태그는 리액트 라우터에서 제공하는 컴포넌트로, 사용자에게 클릭 가능한 링크를 제공합니다. HTML의 <a> 태그와 유사하게 작동하지만, 전체 페이지의 리로드 없이 클라이언트 사이드 네비게이션을 구현할 수 있습니다.

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

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

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

export default App;

 

위 예제에서는 Link 태그를 사용하여 "Home" 페이지와 "About" 페이지로 이동할 수 있습니다. Link 태그는 네비게이션 바에 위치하여 사용자에게 클릭 가능한 링크를 제공합니다.

 

useNavigate 훅

useNavigate 훅은 프로그래밍 방식으로 네비게이션을 구현할 때 사용됩니다. 사용자 입력, 조건문, API 호출 후 등의 특정 이벤트가 발생했을 때 페이지를 이동시키고 싶을 때 유용합니다.

사용 예제:

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

function Home() {
  let navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
}

function About() {
  return <h2>About Page</h2>;
}

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

export default App;

 

위 예제에서는 useNavigate 훅을 사용하여 "Go to About" 버튼을 클릭했을 때 "About" 페이지로 이동하게 구현했습니다. useNavigate는 함수형 컴포넌트 내부에서 사용할 수 있으며, 네비게이션을 프로그래밍 방식으로 처리할 수 있도록 도와줍니다.

 

결론

Link 태그와 useNavigate 훅은 각각의 장단점이 있으며, 상황에 맞게 선택해서 사용할 수 있습니다.

• Link 태그: 정적인 네비게이션 링크를 제공할 때 유용합니다. 주로 네비게이션 바, 메뉴 등에서 사용됩니다.
• useNavigate 훅: 동적인 네비게이션을 구현할 때 유용합니다. 사용자 인터랙션이나 특정 이벤트에 반응하여 페이지를 이동시킬 때 사용됩니다.