[React] Navigation 만들기 (6) - Custom navigation hook 만들기

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

function Route({path, children}){
    const {currentPath } = useNavigation();

    if(path === currentPath){
        return children;
    }

    return null;
}

export default Route;

custom navigation hook을 만드는 목적 :

다른 엔지니어들이 네비게이션을 쉽게 사용할 수 있도록 함. 약간의 타이핑을 줄여준당

 

src/hooks/use-navigation.js

import NavigationContext from "../context/navigation";
import { useContext } from "react";


function useNavigation(){
    return useContext(NavigationContext);
}

export default useNavigation;

이렇게 커스텀 훅을 만들었따!

 

그럼 Route.js에서 navigation hook을 사용하도록 수정하자

 

 

- src/component/Route.js

import { useContext } from "react";
import NavigationContext from "../context/navigation";

function Route({path, children}){
    const {currentPath } = useContext(NavigationContext);

    if(path === currentPath){
        return children;
    }

    return null;
}

export default Route;

->

//import { useNavigation } from "../hooks/use-navigation"; // 이러면 에러
import  useNavigation from "../hooks/use-navigation";

function Route({path, children}){
    const { currentPath } = useNavigation();

    if(path === currentPath){
        return children;
    }

    return null;
}

export default Route;

 

- Link.js에서도 hook을 사용하도록 변경한다

import { useContext } from "react";
import NavigationContext from "../context/navigation";
import classNames from "classnames";

function Link({ to, children }){
  const {navigate} = useContext(NavigationContext);

  const classes = classNames('text-blue-500');
  const handleClick = (event) => {    
    if(event.metaKey || event.ctrlKey){ // ctrl 키 눌렀을 때 새로운 탭에서 열기
      return;
    }
    event.preventDefault();
    navigate(to);
  }
  return <a className={classes} href={to} onClick={handleClick}>{children}</a>
}

export default Link;

->

import useNavigation from "../hooks/use-navigation";
import classNames from "classnames";

function Link({ to, children }){
  const {navigate} = useNavigation();

  const classes = classNames('text-blue-500');
  const handleClick = (event) => {    
    if(event.metaKey || event.ctrlKey){ // ctrl 키 눌렀을 때 새로운 탭에서 열기
      return;
    }
    event.preventDefault();
    navigate(to);
  }
  return <a className={classes} href={to} onClick={handleClick}>{children}</a>
}

export default Link;

 

그럼 기존과 같이 코드는 잘 작동한다!