[TIL] Day 33 Link와 useNavigate의 차이 (React Router DOM)

2023.11.20 월

React에서 상세페이지로 이동할 때 사용되는 React Router DOM의 대표적인 요소 `Link`와 `useNavigate`가 있다.

페이지를 이동한다는 목적은 같은데 과연 어떤 방법으로 사용되며, 그 차이점은 무엇일지 궁금해졌다.

 

Link

선언적인 페이지 이동

React Router DOM에서 제공하는 `Link` 컴포넌트는 페이지 간의 선언적인 링크를 생성하는 데 사용된다.

JSX 안에서 사용되며, 사용자가 클릭할 수 있는 링크를 만들어준다.

이를 통해 페이지 간 이동이 클라이언트 측에서 처리되므로 전체 페이지가 다시 로드되지 않아 부드러운 전환을 제공할 수 있다.

간단한 예를 들어보자.

홈 페이지에서 상세 페이지로 이동하는 링크를 생성하는 코드

<Link to="/detail">상세 페이지로 이동</Link>

 

useNavigate

프로그래밍적인 라우팅 제어

React Router v6에서 도입된 `useNavigate` 훅은 함수를 호출하여 프로그래밍적으로 라우팅을 수행하는 데 사용된다.

이를 통해 자바스크립트 코드 내에서 동적으로 라우팅을 조작할 수 있다.

예를 들어,

버튼 클릭과 같은 이벤트 핸들러에서 상세 페이지로 이동하는 코드를 작성할 수 있다.

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

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

  // 어떤 이벤트 또는 상황에서 상세 페이지로 이동
  const handleNavigate = () => {
    navigate('/detail');
  };

  return <button onClick={handleNavigate}>상세 페이지로 이동</button>;
}

 

어떤 것을 사용해야 하나?

Link vs useNavigate

 

사용할 요소는 프로젝트의 구조 및 요구 사항에 따라 다를 수 있다.

보통은 `Link`가 사용자와의 상호 작용을 위해,

`useNavigate`는 코드나 이벤트 핸들러에서 프로그래밍 방식으로 라우팅을 제어하기 위해 사용된다.

결국, `Link`와 `useNavigate`는 React Router DOM을 사용하여 페이지 간 이동을 다룰 때 각각의 장점을 제공할 수 있다.

프로젝트의 특성에 맞게 선택하여 라우팅을 구현해보자!

 

 

---

하루를 마치며

상세 페이지로 이동시키는 코드를 작성하기 위해서 React Router DOM에서 어떤 요소를 사용해야 좋을지 알게 되었다.

이제 초반 구조를 설계할 때 고민하는 시간을 더 줄이고, 코드 작성에 집중할 수 있을 것이다!

React는 아직 낯설지만 점점 더 친해지고 있다.

 

 

오늘의 한 줄
선택과 집중