Link 컴포넌트

• 라우터 내에서 직접적으로 페이지를 이동할 때 사용하는 컴포넌트

import * as React from "react";
import { Link } from "react-router-dom";

function UsersIndexPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={user.id}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

🤔 a 태그 대신 Link 컴포넌트를 사용하는 이유는?
a태그는 href로 지정한 주소로 이동을 하기 때문에 전체 페이지가 렌더링 되지만,
Link 컴포넌트는 재 렌더링이 필요한 부분만 재렌더링 시켜서 부드러운 화면 전환이 가능하게 한다.

useNavigate

• 페이지를 이동할 때 사용

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

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

🤔 Link 컴포넌트와 useNavigate의 차이점은?
Link 컴포넌트는 주로 단순 페이지 이동을 위해 사용하고,
useNavigate는 특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우 사용한다

참고자료
https://reactrouter.com/en/main/components/link
https://reactrouter.com/en/main/hooks/use-navigate