[리액트] Link와 useNavigate 비교

1. Link를 사용하는 경우:

• 주로: 페이지 간 이동을 위한 하이퍼링크를 클릭할 때 사용합니다.
• 장점: 매우 간단하고 HTML의 <a> 태그와 유사하게 작동합니다.
• 클릭 시 URL을 변경하며 해당 경로에 맞는 페이지를 렌더링합니다.
• 사용 예: 단순히 사용자가 클릭해서 이동해야 할 때.

<Link to="/fingers">for fingers</Link>

• 언제 사용해야 하나:

- 내비게이션이나 메뉴에서 사용자 클릭으로 페이지 이동을 할 때

- 페이지 리로딩 없이 SPA(Single Page Application) 방식으로

쉽게 경로 변경을 하고 싶을 때.

---

2. useNavigate를 사용하는 경우:

• 주로: 코드 상에서 직접 페이지를 이동시키고 싶을 때 사용합니다.
• 특정 조건에 맞춰서 프로그래밍적으로 페이지를 이동해야 할 때 유용합니다.
• 장점: 함수 형태로 사용할 수 있기 때문에,
• 클릭 이벤트뿐만 아니라 조건이 충족될 때 자동으로 페이지 이동을 할 수 있습니다.
• 사용 예: 폼 제출 후 페이지를 이동하거나, 로그인 성공/실패 후 페이지를 리다이렉트해야 할 때.

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

function SomeComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 특정 조건에 따라 페이지를 이동시킬 수 있음
    navigate("/fingers");
  };

  return <button onClick={handleClick}>Go to Fingers Page</button>;
}

• 언제 사용해야 하나:
  • 버튼 클릭 후 조건에 따라 페이지를 이동할 때.
  • 폼 제출 후 자동으로 리다이렉트가 필요할 때. (조건 충족)
  • 이벤트나 함수 내에서 페이지 이동이 필요할 때.

---

결론:

• 단순 링크 이동이라면 **Link**가 더 간단하고 직관적입니다.
• 사용자 클릭만으로 처리 가능해서 UI 요소에 적합해요.

 

• 조건에 따라 페이지를 이동시키거나 버튼,
• 이벤트와 함께 사용해야 하는 경우라면 **useNavigate**가 더 적합합니다.

지금처럼 사이드바의 링크 역할을 할 때는
Link를 사용하는 것이 더 적합할 가능성이 높음.