React 컴포넌트 DRY하게 작성하기 : varient

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

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

 

페이지 내 조건부 렌더링이 필요한 경우가 있다.

플래그를 마구 추가한다.

플래그 하나는 0,1 바이너리다

한개 추가할 때마다 2의 제곱수 만큼 케이스가 늘어난다.

 

복잡한 조건부 렌더링을 varient 변수를 도입해서 해결해보자.

어떤 조건에 따라 어떤 컴포넌트들이 나타나는지 쉽게 이해할 수 있다.

8개의 경우의 수 중 중 실제로 쓰는 경우는 몇개나 되며, 의미는 무엇인가?

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>
  )
}

적용 예제 구경하기 : runtime-bash-c37ve - CodeSandbox

runtime-bash-c37ve - CodeSandbox