Quotka2.0 Router / useMatch / Twin.Macro

구현 화면

image

구현 && 에러 해결 과정

  1. header.tsx에 Link를 사용하려고 하니 자꾸 에러가 나서 애를 먹었는데,

router 설정 에러였다. react에서 라우터는 하나만 사용해야 한다.

원래 코드는, App 컴포넌트에서 <Header/> 와 <Router/> 컴포넌트를 동일한 위치에 사용하려고 했다.

export default function App() {
  return (
    <AppContainer>
      <Header />
      <Router />
    </AppContainer>
  );
}

Router를 사용하려면 동일한 형제관계가 아니라 부모 자식 관계가 되었어야했다. Header에 router를 사용하려면 이렇게 같은 관계의 구조는 잘못된 구성이라 오류가 발생했다.

해결방법으로는

export default function App() {
  return (
    <AppContainer>
      <Router />
    </AppContainer>
  );
}

export default function Router() {
  return (
    <BrowserRouter>
      <TopSectionContainer>
        <Header />
        <MainHeader />
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="*" element={<Error404 />} />
        </Routes>
      </TopSectionContainer>
    </BrowserRouter>
  );
}

해결 방법은 컴포넌트 내부에 <Header> 컴포넌트를 사용하는 것이다.

즉, Header 컴포넌트 내에서 또는 를 사용하려면, Router의 자식관계로 만들어주면 된다.

(혹은 app.tsx 파일에서 router를 설정해주면 된다. 뭐 결국 router를 통으로 감싸 header가 내부에 위치하게 해준다는 것이니 같은 말이긴하다.)

  1. hover style이 아닌, active style을 다르게 적용하고 싶을 때, useMatch

React Router v6 이상에서는 useMatch 훅을 사용하여 현재 경로와 일치 여부를 확인할 수 있다.

useMatch는 현재 경로와 경로 패턴을 비교하여 일치하는지 여부를 확인하는 훅인데, useLocation을 이용할 때보다 코드가 짧고 간편함을 느꼈다.

만약 useMatch를 사용하면, 아래와 같이 간단히 구현 가능하다. (!!의 경우, typeScript를 이용하였기에 에러가 발생해서 붙여줬다. null의 값이 들어오지 않는다는 걸 확인해주기 위해서!)

  const homeMatch = useMatch("/");

 <NavItem to="/" active={!!homeMatch}>

그리고 useLocation을 사용했더라면, 다음과 같이 구현했을 것이다.

const location = useLocation();

<NavItem to="/" active={location.pathname === "/test"}>
  1. styled-components와 tailwindCSS의 결합

저번 포트폴리오를 제작하면서 tailwindCSS를 이용했고, styled-components보다 반응형 만들기 쉽고 코드를 조금 더 빨리 짤 수 있다는 생각이 들었지만, 코드가 너무 복잡하고 지저분해보였다.

쿼카2.0을 시작하게 되면서, 혼자 ui를 감당해야하기에 tailwindCSS의 장점이 너무나도 크게 보였지만, 코드의 가독성을 심각하게 훼손했었던 기억에 망설였었다.

근데 카카오 FE개발에서의 tailwindCSS사용기 이 글을 보고, 나도 Twin.Macro라는 라이브러리를 활용해 디자인 코드를 작성한다면 내 고민을 해결하면서, tailwindCSS의 장점을 들고 갈 수 있겠다는 생각이 들었다.

초기 세팅에 좀 애를 먹었지만… 결론적으로 Twin.Macro 라이브러리를 잘 도입하였다!

const HeaderWrapper = styled.div`
  ${tw`
    container mx-auto flex flex-wrap pt-5 flex-col md:flex-row items-center
  `}
`;

const LogoWrapper = styled(Link)``;

const LogoIcon = styled(LogoIc)`
  ${tw`
    w-9
    h-9
    cursor-pointer
  `}
  fill: #fff;
`;

이렇게 작성을 하고 나니, style의 재사용성이 정말 좋아졌다.

가장 반복되는 style들은 global하게 작성해보고 싶은데 아직 큰 그림까지 보기엔 부족함이 있는 듯하다.

빨리 완성하고 싶다!