useNavigate(), useLocation()

프로젝트를 진행하면서 첫번째 페이지에서 두번째 페이지로 useState()를 사용해 만든 state 변수를 넘겨줄 일이 생겼다.
NavLink, Router등을 이용하여 Type값으로 만들고 이런저런 방법으로 접근했지만 보기좋게 실패했다.
계속된 실패를 경험하다가 useLocation과 useNavigate() Hook을 접하게 되었다.
나를 고통에서 벗어나게해준 아름다운 Hook들을 정리해보자.

useNavigate()

useNavigate v6.11.0

먼저 useNaviate()는 Link태그와 비슷하게 설정한 url로 이동할 수 있는 기능을 수행한다.
나는 여기에 state값을 함께 실어서 이동하는 방법을 사용했다.

const nav = useNavigate();

먼저 useNavigate()를 사용해서 nav를 만들어 주었다.
이후 url과 state값을 적절한 trigger에 위치시켜주면 된다.

const clicked = () => {
    const paramHover = [...hover];
    nav('/func', {state: {value: paramHover}});
}

나는 해당 요소를 click했을 때 func 경로로 이동하면서 state를 함께 전달하도록 하였다.
이렇게 state값을 전달했으니 이제는 useLocation()으로 해당 값을 받아보자.

useLocation()

useLocation v6.11.1

const location = useLocation();
const hover = location.state.value;
const [hoverState, setHoverState] = useState<number[]>([]);

넘어온 useNavigate()에 담긴 값은 useLocation()속에 포장되어 있다.
location변수를 만들어 값을 담아주고 location을 뜯어 state의 값을 hover변수에 담았다.

useNavigate()와 useLocation()을 이용하여 2일 정도 앓던 문제를 해결하니 이전 useContext()처럼 리액트 Hook의 고마움을 다시 한번 느끼게 되는 과정이었다.