[TIL] Day 34 navigate 함수 사용 시 주의사항 (React Router DOM)

2023.11.21 화

 

React Router의 navigate 함수를 사용할 때 주의할 점이 있다.

특히, 상대 경로와 음수 값을 사용할 때의 주의사항을 다뤄보려고 한다.

 

 

navigate 함수의 사용

React Router에서는 페이지 간 이동을 처리하기 위해 useNavigate 훅을 제공한다.

이를 사용하여 다양한 경로로 이동할 수 있다.

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

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

  // 부모 경로로 이동
  <button onClick={() => { navigate("../") }}>Move</button>

  // 이전 페이지로 이동
  <button onClick={() => { navigate(-1) }}>Back</button>
}

 

 

주의할 점

navigate 함수와 음수 값

첫 번째 버튼에서는 navigate("../")를 사용하여 부모 경로로 이동하는데,

이것은 상대 경로 정상적으로 동작하는 것을 볼 수 있다.

그러나 두 번째 버튼에서는 navigate(-1)을 사용하여 이전 페이지로 이동하려고 한다.

이 부분에서 주의가 필요하다!

음수 값을 사용하는 경우, 브라우저 히스토리 스택에 이전 페이지가 항상 보장되지 않을 수 있다.

 

해결 방법

이 경우에는 조건문을 추가하여 이전 페이지로 이동할 수 있는지 여부를 확인하는 것이 좋다.

<button onClick={() => { history.length > 1 && navigate(-1) }}>Back</button>

이렇게 함으로써, 브라우저 히스토리 스택에 이전 페이지가 있는 경우에만 뒤로 가기 동작을 수행하게 된다.

 

 

 

---

하루를 마치며

상세 페이지로 이동시키기 위해서 React Router DOM의 navigate 함수를 사용할 때 오류가 발생할 수 있는 부분을 인지할 수 있었다.

앞으로 페이지 이동 동작을 구현할 때 항상 사용자 경험을 고려하고, 히스토리 스택에 대한 예외 상황을 생각할 수 있을 것이다.

 

 

오늘의 한 줄
뒤로 가기 No
앞으로 가기 Yes