[React] Navigation 만들기 (4) - 스타일링 보강하기

지금은 tailwind css 라이브러리를 사용중이라 a태그의 기본 스타일링이 전혀 없는 상태임

(마우스 커서, 텍스트 컬러, 밑줄 모두 없음)

 

그래서 마우스 커서도 변경해주고 현재 페이지는 밑줄도 쳐서 보여줄거임

(+ classname이라는 라이브러리도 사용하고 있음)

 

before

 

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;

a 태그에 className을 넣으면

 이렇게 되었습니다

 

여기서 약간의 refactor가 들어감. custom hook을 사용하고

currentPage == window.location.pathname과 일치할떄만 디자인을 주도록 수정할 것입니당