React Router 에서 Navigate 함수를 확장하여 사용하기

---

😎 서론

프로젝트를 진행하다보면 여러 곳에서 반복적으로 라우팅 관련 기능을 구현하게 되는 경우가 많습니다. 이를 해결하기 위해 React Router 의 useNavigate 를 활용하여 보다 편리하게 사용할 수 있는 custom hook 을 만들어 보았습니다.

 

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

const useAppNavigate = () => {
  const navigate = useNavigate()

  const navigateBack = () => {
    navigate(-1)
  }

  const navigateTo = (path) => {
    navigate(path)
  }

  return { navigateBack, navigateTo }
}

export default useAppNavigate

여기서 useAppNavigate 라는 custom hook 은 두가지 기능을 제공합니다.

 

1. navigateBack: 현재 페이지에서 이전 페이지로 돌아가는 기능

2. navigateTo: 원하는 경로로 이동하는 기능

 

이제 이 custom hook을 어떻게 사용하는지 간략하게 살펴보겠습니다.

 

🤠 navigateBack 활용

때론 사용자에게 '뒤로가기' 기능을 제공하고 싶을 때가 있습니다. 이때 navigateBack 함수를 사용하면 간단하게 구현할 수 있습니다.

const { navigateBack } = useAppNavigate();

// '뒤로가기' 버튼이 클릭되었을 때 실행
<button onClick={navigateBack}>뒤로 가기</button>

 

🥸 navigateTo 활용

특정 경로로 이동하고자 할 때 navigateTo 함수를 사용합니다.

const { navigateTo } = useAppNavigate();

// '/profile' 경로로 이동하고자 할 때
<button onClick={() => navigateTo('/profile')}>프로필 보기</button>

요약하면 React Router 의 useNavigate 는 굉장히 유용한 기능을 제공하지만, 특정한 사용 상황에 따라 조금 더 확장된 기능이 필요할 때가 있습니다. 이럴 때 위와 같은 custom hook 을 활용하면 보다 편리하게 라우팅 관리를 할 수 있습니다.

 

🤔 왜 Custom Hooks 을 만들었는가?

useNavigate 와 같은 기본 Hooks 가 있다면, 왜 추가적으로 custom Hooks 를 만들었는지 궁금할지도 모릅니다. 이에 대해서 간단하게 설명드리겠습니다.

1. 코드 간결화: 반복되는 라우팅 코드를 간단하게 만들 수 있습니다.

2. 명확성: 함수의 이름을 통해 용도를 바로 알 수 있게 됩니다. 예를 들면, navigateBack 은 바로 뒤로 가는 기능임을 알 수 있습니다.

3. 유연성: 나중에 라우팅 관련 로직을 변경할 때, 한 곳에서만 수정하면 되므로 관리가 쉽습니다.

4. 재사용: 여러 컴포넌트에서 같은 로직을 쉽게 재사용할 수 있습니다.

 

🤭 결론

Custom Hooks 는 프로젝트의 효율성과 가독성을 높이는 핵심 도구입니다. 이를 통해 반복되는 코드를 줄이며, 라우팅과 같은 기능을 더 명확하고 직관적으로 표현할 수 있게 되었습니다. 이는 코드의 관리와 수정을 쉽게 하며, 다른 개발자들이 코드를 이해하고 활용하는 데에도 큰 도움을 줍니다.