/ REACT

Link와 useNavigate

React은 다음과 같이 구성되어 있습니다.




오늘은 React에서 페이지 이동에 사용되는 Link와 useNavigate에 대해서 알아보겠습니다.

일단 react-router-dom을 설치합니다.

npm install react-router-dom@6

react-router-dom을 설치한 후,

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

// .....
<Link to="/">Home</Link>
<Link to="/detail">Detail</Link>

위와 같이 Link를 import하고 를 사용하면 됩니다. 그러면 링크가 만들어지고 링크는 해당 경로로 이동합니다.
클릭 시에 바로 이동하는 로직을 구현할 경우 유용합니다.

useNavigate

Link말고도 useNavigate라는 훅을 사용하여 페이지를 이동시킬 수 있습니다.

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

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

    return (
        <div>
            <button onClick={() => { navigate('/detail') }}>Detail로 이동하기</button>
        </div>
    )
}

위와 같이 useNavigate()를 사용하면 페이지 이동을 할 수 있는 함수가 반환됩니다.
그것을 navigate변수에 저장하고 navigate()안에 인자로 경로를 지정하면 해당 경로로 이동할 수 있습니다.
Link와 다른점은 특정한 조건을 주고 조건에 따라서 페이지 이동을 하게할 수 있습니다.




End.