useNavigate

왜 navigate?

문해력 향상을 위한 서비스, 문해한 하루를 프로젝트로 진행하며 training component를 구현할 때, 꼭 해야하는 것은 유저가 훈련을 하고 있다는 느낌을 받도록 구현하는 것이었다.

main page에 접속하게 되면 상단에 training 탭이 존재하는데 여기서 유저는 자신에게 맞는 스탭으로 보내져야 한다.

training 페이지는 같지만 유저가 어떤 스탭을 통해 접속했는지에 따라 다른 화면을 보여줘야한다면, useNavigate의 state를 인자로 넘겨 처리를 하면 되겠다는 생각을 했다.

react-router-dom v6

react-router-dom을 처음 알았을 때는 v5였기 때문에 지금의 문법과 차이가 있다.

v6에 들어오면서 여러가지가 바뀌었지만 내가 필요한 부분은 useNavigate이기 때문에 이것만 다루기로 한다!

useNavigate

일단 useNavigate가 하는 일은 Link와 비슷하지만 약간의 차이라고 한다면 useNavigate는 양식이 제출되거나, 특정 이벤트가 발생했을 때, URI를 조작할 수 있는 interface이다.

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

function TrainingStep(){
	const navigate = useNavigate()
	return (
    	<StepContainer onClick={() => navigate("/training")}>
        	{...}
        </StepContainer>
    )
}

StepContainer를 클릭했을 때 navigate가 실행하도록 코드를 짰지만, 더 다양한 이벤트에 반응하도록 코드를 짤 수 있다. 여기서 중요한 것은 페이지 이동이 아니라 useNavigate의 인자로 넣을 수 있는 state에 있다.

<StepContainer onClick={() => navigate("/training", {replace: true})}>
	{...}
</StepContainer>

replace는 뒤로가기 가능 여부를 설정하는 프로퍼티이다. default로 false이고, 뒤로가기를 실행했을 때 가능한 것을 의미합니다.

이제 가장 중요한 state입니다.

이 state를 통해 단계별 트레이닝 페이지에 공통으로 들어갈 글 작성 컴포넌트 말고, 가이드 부분을 처리해줄 예정입니다.

<StepContainer onClick={() => navigate("/training", {state: {step: stpe}})}>
	{...}
</StepContainer>

// Location
import {useLocation} from "react-router-dom"

function TrainingGuide() {
  const location = useLocation();
  console.log('state', location.state);
  const { step } = location.state;
}

이제 구현을 완성해보자.