nav 라우트를 활용해서 상태관리하기

2023년 7월 5일 · 약 3분

Cook-Book 많이 만듭니다

React-Router-DOM에 대해서 저는 생각보다 모르는 지식이 상당히 많습니다. url path에 접근하는 방법을 이번에 찾게 되었습니다.

const Header = () => {
  const { pathname } = useLocation();
  return (
    <HeaderWrapper>
      {/* header 태그 */}
      <List>
        {/* ul 태그 */}
        <Item selected={pathname.startsWith('/web')}>
          {/* li 태그 */}
          <Link to="/web">Go to Web</Link>
        </Item>
        <Item selected={pathname === '/design'}>
          <Link to="/design">Go to Design</Link>
        </Item>
        <Item selected={pathname === '/server'}>
          <Link to="/server">Go to Server</Link>
        </Item>
      </List>
    </HeaderWrapper>
  );
};

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

위 블로그 참고하고 해결했습니다.

React-Router-DOM의 상세 기능들을 적극적으로 활용해봐야 할 것 같습니다.

적용

Navbar.tsx
import { Nav } from './Navbar.style';
import { useIsRedirectToCards, useLogin } from '@/hooks';
import { LoggedInNav, LoggedOutNav } from './subcomponents';

export function Navbar() {
  const { isLoggedIn } = useLogin();
  const { isRedirecting } = useIsRedirectToCards();
  return (
    <Nav>
      {isLoggedIn && !isRedirecting ? <LoggedInNav /> : <LoggedOutNav />}
    </Nav>
  );
}

이런 컴포넌트가 있습니다.

LoggedInNav.tsx
import { Container, List, ListItem } from '../../Navbar.style';
import { ROUTE_PATHS } from '@/constant/config';
import { WeightedLink } from '../WeightedLink';

export function LoggedInNav() {
  return (
    <Container>
      <List>
        <ListItem>
          <WeightedLink link={ROUTE_PATHS.CARDS} title="Home" />
        </ListItem>
        <ListItem>
          <WeightedLink link={ROUTE_PATHS.DECK} title="Deck" />
        </ListItem>
      </List>
      <List>
        <ListItem>
          <WeightedLink link={ROUTE_PATHS.SETTING} title="Setting" />
        </ListItem>
      </List>
    </Container>
  );
}

내부에서는 이렇게 마크업만 처리했습니다. 더 깊게 들어가면 보입니다. 그냥 단순해서 중간과정을 보여줬습니다.

WeightedLink.tsx
import { useLocation } from 'react-router-dom';
import { NavLinkFontWeight } from './WeightedLink.style';

export function WeightedLink({ link, title }: { link: string; title: string }) {
  const { pathname } = useLocation();
  return (
    <NavLinkFontWeight
      current={pathname === link ? 'bold' : 'regular'}
      to={link}
    >
      {title}
    </NavLinkFontWeight>
  );
}

이렇게 되면 path를 구독하고 상태에 따라 전용 스타일을 적용할 수 있게 됩니다.

단점은 디자이너는 Nav에 애니메이션을 넣는 것이 정석인데 이거 못합니다. 물론 현재 지식으로는 못합니다.

적용​

적용