[React] Navigation 만들기 (3) - Link 기능 보강하기 (새탭에서 열기)

ctrl 키를 누르고 클릭하면 새 탭에서 브라우저가 열려야하는데

우리의 Link 컴포넌트는 아직 그 기능이 없음

이걸 만들거임

 

기존 코드는 이러하다

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

function Link({ to, children }){

  const {navigate} = useContext(NavigationContext);
  const handleClick = (event) => {
    event.preventDefault();
    navigate(to);
  }
  return <a onClick={handleClick}>{children}</a>
}

export default Link;

 

변경된 코드는 다음과 같다

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

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

  const handleClick = (event) => {    
    if(event.metaKey || event.ctrlKey){ // ctrl 키 눌렀을 때 새로운 탭에서 열기
      return;
    }
    // console.log(event);
    event.preventDefault();
    navigate(to);
  }
  return <a href={to} onClick={handleClick}>{children}</a>
}

export default Link;