[React] Link, Navigate, useNavigate의 차이점 및 활용법

리액트에서는 세 가지 방법으로 페이지를 이동할 수 있다.

1. Link 컴포넌트
2. Navigate 컴포넌트
3. useNavigate Hooks

세 가지 모두 다 페이지를 이동할 때 쓸 수 있다는 점에서 비슷하다.

이것들은 언제 사용하면 좋을까?

 

1. Link

리액트 라우터에서는 <a> 태그 대신에 Link 컴포넌트를 사용한다.

to 하는 prop으로 이동할 경로를 정해준다.

 

<Link to="/posts">블로그</Link>

 

Link 컴포넌트는 사용자가 클릭해서 페이지를 이동하도록 할 때 사용한다.

하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등에 사용한다.

 

2. Navigate

리턴값으로 Navigate 컴포넌트를 리턴하면 to prop으로 지정한 경로로 이동한다.

 

function PostPage() {
  // ...

  const post = getPost(postId);

  // post가 없는 경우 /posts 페이지로 이동
  if (!post) {
    return <Navigate to="/posts" />;
  }

  // ...
}

 

Navigate 컴포넌트의 경우 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다.

 

예를 들어, 쇼핑몰의 회원전용 페이지에 로그인 없이 들어올 경우 로그인 페이지로 리다이렉트를 한다든지, 혹은 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우에 사용된다.

 

3. useNavigate

useNavigate 라는 Hook으로 navigate 함수를 가져오묜 이 함수를 통해서 페이지를 이동할 수 있다.

 

const navigate = useNavigate();

const handleClick = () => {
  // ... 어떤 작업을 한 다음에 페이지를 이동
  navigate('/wishlist');
}

 

useNavigate hook의 경우 특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용하면 된다.

useNavigate는 함수이기 때문에 어떠한 이벤트나 조건을 만족하면 해당 페이지로 이동할 수 있도록 조절할 수 있다.

 

예를 들어, 쇼핑몰에서 장바구니에 담기 버튼을 눌렀을 때 리퀘스트를 보낸 후 장바구니 페이지로 이동시킨다든지, 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우에 사용된다.