2022/04/22 useLocation을 이용해서 스타일 활성화하기

각 메뉴를 fontawesome classname과 location 객체의 배열로 만든 다음

메뉴의 location과 useLocation의 pathname이 일치할 경우

styledcomponent에서 color로 props를 내려준 isActive 속성을 활성화시킨다.  

import styled from 'styled-components';
import { useLocation, useNavigate } from 'react-router-dom';

interface isActiveProp {
  isActive: boolean;
}

const Container = styled.nav`
  height: 5rem;
  position: fixed;
  bottom: 0;
  max-width: 768px;
  width: 100%;
  background-color: #007580;
`;
const NavMenu = styled.ul`
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1.5rem 0;
  margin: 0;
`;
const NavMenuList = styled.li<isActiveProp>`
  font-size: 2rem;
  color: ${(props) => (props.isActive ? '#fed049' : '#d8ebe4')};
  display: flex;
  cursor: pointer;
`;
const DownNav = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const menus = [
    { className: 'fa-solid fa-house', location: '/main' },
    { className: 'fa-solid fa-pen-to-square', location: '/makepost' },
    { className: 'fa-solid fa-comments', location: '/chatlist' },
    { className: 'fa-solid fa-user', location: '/mypage' },
  ];

  const handleMenuClick = (location: string) => {
    navigate(location);
  };
  return (
    <Container>
      <NavMenu>
        {menus.map((menu, idx) => {
          return (
            <NavMenuList key={idx} isActive={pathname === menu.location} onClick={() => handleMenuClick(menu.location)}>
              <i className={menu.className}></i>
            </NavMenuList>
          );
        })}
      </NavMenu>
    </Container>
  );
};
export default DownNav;

참고자료 :

https://developeritchaeyachae.tistory.com/156

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