102224 til React Router: `useNavigate`와 `Link` 컴포넌트의 차이점

React는 단일 페이지 애플리케이션(SPA)을 구축하기에 매우 유용한 프레임워크

 

. 사용자가 클릭하는 링크를 통해 페이지를 이동하거나,

 

특정 이벤트 이후에 프로그래밍적으로 경로를 변경해야 할 때,

 

React Router라이브러리가 강력한 도구로 작동합니다. 

 

  `Link` 컴포넌트란?


`Link` 컴포넌트는 React Router에서 HTML의 `<a>` 태그와 유사하게 동작,

React Router의 `Link` 컴포넌트는

 

브라우저의 주소만 바꾸면서

 

페이지 리프레시 없이 애플리케이션의 상태를 유지

 

하면서도 경로를 바꾸는 방식으로 동작

Link`의 예

```jsx
import { Link } from "react-router-dom";

function HomePage() {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}
```



`Link`의 장점

SEO 최적화 

`useNavigate` 



사용자를 다른 경로로 리다이렉트하거나 네비게이트 할 때 사용

 

`Link`는 클릭 이벤트에 의존하는 반면,

 

`useNavigate`는 특정 로직 이후 아니면

 

이벤트 처리 후 페이지를 이동해야 할 때 유용


`useNavigate` 예

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

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

  const handleLogin = () => {
    // 로그인 로직
    // 로그인 성공 후 홈으로 이동
    navigate("/home");
  };

  return (
    <div>
      <h1>Login</h1>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}
```





 `Link`와 `useNavigate`의 차이점



`Link`  사용자에게 명시적으로 페이지 이동을 제공하고 싶을 때.
`useNavigate` 특정 로직이나 동작 후  자동으로 페이지 이동이 필요할 때.



 `Link` 적용 ㅇ ㅖ 

블로그 에서 사용자는 여러 포스트를 탐색할 수 있는데 여기서 

 

각 포스트의 제목에 `Link`를 걸어 사용자가 직접 다음 포스트로 이동할 수 있게 한다 

```jsx
function BlogPostList() {
  return (
    <div>
      <h2>Posts</h2>
      <ul>
        <li><Link to="/post/1">Post 1</Link></li>
        <li><Link to="/post/2">Post 2</Link></li>
      </ul>
    </div>
  );
}
```

 `useNavigate` ㅇ ㅖ 
로그인 기능을 구현할 때,

 

사용자가 로그인에 성공한 후

 

자동으로 홈 화면 으로 이동시켜야 할 경우 

```jsx
function Login() {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 로그인 로직
    if (loginSuccess) {
      navigate('/home');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Username" />
      <button type="submit">Login</button>
    </form>
  );
}
```


`Link`와 `useNavigate`는 모두 React Router에서 페이지 전환을 처리하는 유용한 도구다 

 

`Link`는 사용자 클릭**을 통한 페이지 이동에 적합

 

`useNavigate`는 프로그래밍적 제어 를 통해 경로를 변경하는 데 적합

 

이 두 가지 컴포넌트를 적절히 활용하면 React 애플리케이션에서 효율적인 네비게이션 시스템을 구축할 수 있게 도와준다