refactor: props 대신 useLocation 사용

woowacourse-teams · Jul 27, 2023 · 4ac8e14 · 4ac8e14
1 parent c825ea1
commit 4ac8e14
Showing 1 changed file with 4 additions and 9 deletions.
diff --git a/frontend/src/components/@common/Navbar/index.tsx b/frontend/src/components/@common/Navbar/index.tsx
@@ -1,3 +1,4 @@
+import { useLocation } from 'react-router-dom';
 import Calendar from 'components/@common/Icons/Calendar';
 import Home from 'components/@common/Icons/Home';
 import Plant from 'components/@common/Icons/Plant';
@@ -6,14 +7,8 @@ import theme from '../../../style/theme.style';
 import { NavItem, NavItemArea, NavLabel, NavLink, Wrapper } from './Navbar.style';
 import { URL_PATH } from 'constants/index';
 
-type PathKey = keyof typeof URL_PATH;
-type Path = (typeof URL_PATH)[PathKey];
-
-interface NavbarProps {
-  currentPath: Path;
-}
-
-const Navbar = ({ currentPath }: NavbarProps) => {
+const Navbar = () => {
+  const { pathname } = useLocation();
   const navItems = [
     {
       path: URL_PATH.main,
@@ -40,7 +35,7 @@ const Navbar = ({ currentPath }: NavbarProps) => {
   return (
     <Wrapper>
       {navItems.map(({ path, label, Icon }, index) => {
-        const active = currentPath === path;
+        const active = pathname === path;
         return (
           <NavLink key={index} to={path}>
             <NavItemArea $active={active}>