[React] 컴포넌트를 Dry 하게 작성하기

우리는 많은 유형을 홈페이지 헤더를 만듭니다.

 

const Header = () => {
  return (
    <Box>
      <Logo />
      <MenuItem />
      <MenuItem />
      <UserMessages />
      <UserProfile />
    </Box>
  )
}

헤더에는 Logo, MenuItem, UserProfile 등 요소를 포함해서 개발합니다. 

이때, 헤더에서 로그인 기능을 제공한다고 생각해보면 UserProfile 부분은 SignIn과 UserProfile로 나뉘어서

제공됩니다. 

 

const Header = (props: { showSignup: boolean }) => {
  return (
    <Box>
      <Logo />
      <MenuItem />
      <MenuItem />
      {!props.showSignup && <UserMessages />}
      {!props.showSignup && <UserProfile />}
      {props.showSignup && <SignupButton />}
    </Box>
  )
}

다음과 같이 보여집니다. 

아직까진 훌륭한 헤더이다. 

 

필터링된 헤더 

현재 헤더에서 보여주고 있는 기능이 너무 많아서 특정 화면에서는 불필요한 MenuItem이 있으며, 

그 화면에서 CloseButton을 나타냈으면 하는 경우가 발생했다. 

const Header = (props: {
  showSignup: boolean
  hideMenu: boolean
  showClose: boolean
}) => {
  return (
    <Box>
      <Logo />
      {!props.hideMenu && <MenuItem />}
      {!props.hideMenu && <MenuItem />}
      {!props.showSignup && <UserMessages />}
      {!props.showSignup && <UserProfile />}
      {props.showSignup && <SignupButton />}
      {props.showClose && <CloseButton />}
    </Box>
  )
}

이것을 다시 작성한다면 위와 같은 결과물이 나오게 된다. 

Logo를 제외한 모든 요소가 다 Boolean 값에 의해서 결정되고 있다. 

 

이것의 문제는 뭘까? 

해당 코드를 봤을 때 hideMenu, showSignup, showClose가 어떤 경우에 변하는지 알 수 있을까? 

작성을 한 본인 말고 다른 사람이 해당 코드를 유지보수한다면 과연 좋아할지 의문이다. 

 

본인조차 몇일 뒤면 까먹을 수 있다고 생각한다. 

 

출처 - https://swizec.com/blog/variants-a-quick-tip-for-better-react-components/

각 조건에 따라 경우의 수를 나타내었는데, boolean 값이 3개가 있는데, 

그 결과 경우의 수는 2^3이 생겼다. 

 

8개의 경우에 수 중 실제 사용하는 경우는 몇개가 될까? 

출처 - https://swizec.com/blog/variants-a-quick-tip-for-better-react-components/

8개 중에 단 3개만 사용한다. 

 

Defult 화면, 로그인이 필요한 화면, 필터링한 화면 

나머지 5개의 화면은 나타날 수 없는 화면이다. 하지만 코드를 봤을 때 그것은 알 수 없다. 

 

variants 값을 활용하자 

이런 경우에 따라 화면에 나타나는 것이 다른 경우는 생각보다 빈번하게 발생한다. 

그렇다면 이런 경우 어떤 방법을 사용해야 할까? 

 

조건부 렌더링을 할 때 variant 변수를 사용해서 해결하는 방법이 있다. 

 

const Header = (props: { variant: "homepage" | "funnel" }) => {
  let hideMenu, showClose, showSignup

  switch (variant) {
    case "homepage":
      showSignup = true
    case "funnel":
      hideMenu = true
      showClose = true
  }

  return (
    <Box>
      <Logo />
      {!hideMenu && <MenuItem />}
      {!hideMenu && <MenuItem />}
      {!showSignup && <UserMessages />}
      {!showSignup && <UserProfile />}
      {showSignup && <SignupButton />}
      {showClose && <CloseButton />}
    </Box>
  )
}

앞서 말한 것 처럼 로그인이 필요한 경우, 필터링이 필요한 경우 외에는 사용하지 않는 화면이다. 

 

그렇다면 그것을 variant를 사용해서 homepage와 funnel로 구분해서 나타내는 것이다. 

이렇게 작성하면 추후 유지보수를 할 경우에도 이해하기가 훨씬 쉬울 것이다. 

 

출처 

https://swizec.com/blog/variants-a-quick-tip-for-better-react-components/

Variants – a quick tip for better React components | Swizec Teller