[React Router] Link vs NavLink vs useNavigation() 비교

리액트는 React Router를 사용해 페이지를 이동한다.
이때 사용할 수 있는 몇 가지 방법이 있는데 이에 대해서 알아보고자 한다.

🪄 Link

Link는 html의 a태그처럼 링크를 연결해주지만 url 개념과는 다른 path 개념이다.
to라는 속성에 내가 원하는 경로를 넣어주면 된다.
Link 컴포넌트를 사용하면 브라우저의 경로를 이동시키며 페이지를 새로 불러오지 않는다.

<Link to="/home">Go Home</Link>

🪄 NavLink

NavLink는 공식 문서에 따르면 Link의 special version이라고 명시되어 있다.
즉, 특정 링크에 스타일을 넣어줄 수 있다는 점이 가장 큰 차이점이다!

💄 activeStyle와 activeClassName

리액트 웹의 현재 url과 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화된다.
일치하지 않을 때는 다시 비활성화된다.

// 그냥 사용했을 때
<NavLink to="/about">About</NavLink>

// activeClassName
<NavLink to="/about" activeClassName="selected">About</NavLink>

// activeStyle 속성
<NavLink to="/faq" activeStyle = {{
    fontWeight: 'bold',
    color: 'red'
}}>FAQs</NavLink>

🪄 useNavigate

useNavigate훅은 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.
반환받은 함수의 인자로 설정한 경로를 넘겨주면 해당 경로로 이동할 수 있다.
Link와의 차이점은 함수 호출을 통해 페이지를 이동하기 때문에 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있다.

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

const navigate = useNavigate();

navigate('경로');

간단하게는 위와 같이 사용할 수 있고 별도의 이벤트 핸들러를 생성할 때 그 내에서도 사용할 수 있다.

끝!