<Link to>, useNavigate 페이지 이동 차이

<Link to>와 useNavigate는 React Router에서 페이지 이동을 처리하는 두 가지 방법으로, 각각의 용도와 차이점이 있습니다. 둘의 주요 차이점은 주로 컴포넌트 기반 접근과 함수 기반 접근에 있습니다.

1. <Link to>:

<Link> 컴포넌트는 UI 요소로, 사용자가 클릭할 수 있는 링크를 생성합니다. 주로 네비게이션을 처리하는 데 사용됩니다.

특징:

• 컴포넌트 기반: to 속성으로 URL을 지정하고, 클릭 시 해당 경로로 이동합니다.
• 페이지 리로드 없음: React Router의 SPA(Single Page Application) 특성상, 페이지 리로드 없이 URL만 변경됩니다.
• 주로 렌더링 시 사용: 정적인 링크를 렌더링할 때 사용합니다.

예시:

import { Link } from 'react-router-dom';

const MyComponent = () => (
  <Link to="/new-path">Go to New Path</Link>
);

<Link>를 사용할 때, 이 컴포넌트 자체가 클릭 가능한 요소를 제공하며, 클릭하면 자동으로 해당 경로로 네비게이션이 이루어집니다.

2. useNavigate:

useNavigate는 함수형 훅으로, 프로그램적으로 페이지 이동을 처리할 때 사용합니다. 주로 버튼 클릭이나 이벤트 핸들러에서 동적으로 네비게이션을 해야 할 때 유용합니다.

특징:

• 함수 기반: useNavigate()를 호출하면 navigate 함수가 반환됩니다. 이 함수로 프로그래밍적으로 경로를 변경할 수 있습니다.
• 이벤트 기반: 버튼 클릭, 폼 제출 등에서 사용됩니다.
• 리다이렉션 처리: 리다이렉트할 때도 유용하게 사용됩니다.

예시:

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

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/new-path'); // 지정된 경로로 이동
  };

  return <button onClick={handleClick}>Go to New Path</button>;
};

차이점 정리:

특징	<Link to>	useNavigate
사용 목적	UI 내에서 링크를 제공할 때	프로그램적으로 경로 이동을 할 때
방식	컴포넌트 사용 (클릭 시 경로 이동)	함수 사용 (이벤트 핸들러 등에서 경로 이동)
주로 사용하는 경우	메뉴, 내비게이션 바, 페이지 내 링크 등	버튼 클릭, 폼 제출 후 리다이렉트 등
페이지 리로드 여부	리로드 없이 URL 변경 (SPA 특성)	리로드 없이 URL 변경 (SPA 특성)

결론:

• <Link to>는 정적인 링크를 제공하고 싶을 때 사용합니다. 사용자 인터페이스의 일부로 링크를 삽입하고 클릭 시 페이지 이동을 처리합니다.
• useNavigate는 프로그램적으로 경로를 이동해야 할 때, 예를 들어 버튼 클릭이나 특정 이벤트 처리 시 유용합니다.

두 방법은 서로 보완적인 역할을 하며, 상황에 따라 적절하게 선택해서 사용하면 됩니다.