React - NavLink

문제

• 사이드프로젝트로 쇼핑몰을 만들고 있는데 메뉴를 클릭시 색이나 사이즈를 변경하고 싶었다

해결

• usestate를 사용하려 구현할려 했지만 더 편한 방법이 있을꺼같아서 찾아보았다.
• 구글링을 하던 중에 react-router-dom에서 link 하고 navlink를 지원해준다는 것을 발견했다.
• NavLink는 현재 경로와 link의 경로가 일치한 경우 특정 스타일을 변경가능하게 해준다.
• NavLink 공식문서 홈페이지 : https://reactrouter.com/en/main/components/nav-link

 		const activeStyle: any = {
          color: "green",
          textDecoration: "none",
        };
        return (
        <div>
        <NavLink
          to="/shop"
          style={({ isActive }) =>
            isActive ? activeStyle : { textDecoration: "none" }
          }
        >
          <div className="menu">Shopping</div>
        </NavLink>
        <NavLink
          to="/text"
          style={({ isActive }) =>
            isActive ? activeStyle : { textDecoration: "none" }
          }
        >
          <div className="menu">text1</div>
        </NavLink>
        </div>
        )