타입에 따라 조건부 랜더링

switch case 보다 더 깔끔한 in 연산자로 타입에 따라 조건부 랜더링하는 방법입니다.

in 연산자를 이렇게 응용하는 방법이 있었습니다. 일단 리팩토링이 필요하지만 상당히 신기한 전략입니다. 다양한 타입을 받도록 처리해볼 수 있을 것 같습니다.

원래 자동완성도 label만 지원하고 있었지만 조건부랜더링에 가드로 타입이 narrowing으로 다른 자동완성도 지원하는 것을 확인했습니다.

type LinkItem = {
  label: string;
  href: string;
};

type ButtonItem = {
  label: string;
  cb: () => void;
};

type DropdownMenuProps = {
  menuItem: (LinkItem | ButtonItem)[];
  direction?: 'left' | 'right';
};

function Foo(menuItem: (LinkItem | ButtonItem)[]) {
  return (
    <MenuList>
      {menuItem.map((item, idx) => (
        <li key={idx}>
          {'href' in item ? (
            <a href={item.href}>{item.label}</a>
          ) : (
            <button onClick={item.cb}>{item.label}</button>
          )}
        </li>
      ))}
    </MenuList>
  );
}

instanceof는 소용없었습니다. 여기서 의문이 생겼습니다. 지금은 타입의 종류가 1개인데 만약에 3 ~ 4개가 된다면 어떻게 될지 궁금합니다.

// 위 코드블럭이랑 같아서 생략

function Foo(menuItem: (LinkItem | ButtonItem)[]) {
  return (
    <MenuList>
      {menuItem.map((item, idx) => (
        <li key={idx}>
          {'href' in item && <a href={item.href}>{item.label}</a>}
          {'cb' in item && <button onClick={item.cb}>{item.label}</button>}
        </li>
      ))}
    </MenuList>
  );
}

이런 전략들이 있습니다.

타입의 속성이 여러개가 되면 있는지 확인하는 in 연산자로 조건부 랜더링을 처리할 수 있습니다.