[React/styled-components] 네이비게이션 바 클릭시 밑줄 혹은 bold 효과 주는 간단한 방법

이전 프로젝트에서 하드 코딩식으로 구현했었는데, 이번 과제에서는 좀더 효율적으로 구현하여 리뷰를 남긴다.

 

두가지 방법이있다.

 

1. 네비게이션바를 이용하여 네비게이션바와 endpoint부분이 일치하는 경우 (아래처럼 result누르면 localhost:8080/result)

이경우는 useLocation을 이용하는 방법이다.

import { useLocation, useNavigate } from "react-router-dom"; //import를 시킨다.


const Navbar = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation(); // useLocation안의 pathname을 사용한다.
  const Titles = ["Alpha", "Bravo", "Charlie", "Delta", "Echo", "Result"];
  // const [focusedTitle, setFocusedTitle] = useState<string>("");

  return (
    <Container>
      <TitleWrap>
        {Titles.map((title, idx) => {
          return (
            <NavTitle
              key={`navT-${idx}`}
              isActive={pathname === `/${title.toLowerCase()}`} //pathname(endpoint부분) 과 title을 소문자화한 값이 같아면 , true가 되는 값이 나온다.
              onClick={() => {
                navigate(`/${title.toLowerCase()}`);
              }}
            >
              {title}
            </NavTitle>
          );
        })}
      </TitleWrap>
      <ProjectNameWrap>
        <ProjectName>project name</ProjectName>
      </ProjectNameWrap>
    </Container>
  );
};
export default Navbar;

위에서 주석부분을 참고한다.

useLocation의 pathname부분을 사용한다.

이것을 styled component에 props로 효과를 내려줘야한다.

 

type isActiveProp = {
  isActive: boolean;
};

const NavTitle = styled.div<isActiveProp>`
  width: 12.25%;
  text-align: center;
  font-size: 20px;
  font-family: Lato;
  font-weight: ${(props) => (props.isActive ? "700" : "400")};
  text-shadow: ${(props) => (props.isActive ? "1px 4px 4px rgba(0, 0, 0, 0.25)" : "none")};
  cursor: pointer;
`;

true이면? 눌렸을때 효과를 주고싶은곳에 props => props.isActive 부분을 사용하여 커스터마이징할 수 있다.

 

2. 그렇지 않고 컴포넌트 안에 효과 주는 방법 (클릭하면 밑줄 -> 게시글 클릭하면 게시글, 교환내역 클릭하면 교환내역)

아래 사진은 예시다.

 

 

const [focusedTitle, setFocusedTitle] = useState<string>(""); // 상태를 저장한다.


  //원하는 컴포넌트에서 Onclick시에?
  
    onClick={(e) => {
                navigatePageWithClickEffect(title);}
                
   const navigatePageWithClickEffect = (title: string) => {
    setFocusedTitle(title);
  };
  
  //title과 focusedTitle이 같아지면 weight를 bold처리
  
    {Titles.map((title, idx) => {
          return (
            <NavTitle
              key={`navT-${idx}`}
              weight={title === focusedTitle ? "bold" : "normal"}
              onClick={(e) => {
                navigatePageWithClickEffect(title); />

 

//styled-component로 내려준다.

interface WeightProps {
  weight: string;
}
const NavTitle = styled.div<WeightProps>`

const NavTitle = styled.div<isActiveProp>`
  width: 12.25%;
  text-align: center;
  font-size: 20px;
  font-family: Lato;
  font-weight: ${(props) => props.weight};
`;