컴포넌트를 Props로 넘길 때, Props 제어 따로하기

똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11

 

Icon + Title 로 이루어진, 비슷한 형태의 UI 코드를 작성할 때 종종 배열로 작성합니다.

이전까지 저와 팀원 분들의 코드에서 아래와 같은 코드를 종종 볼 수 있었습니다.

const iconList = [
  {
    label: '검색',
    icon: <SearchIcon fontSize="16px" color="primary" />,
  },
  {
    label: '선물하기',
    icon: <GiftIcon fontSize="16px" color="primary" />,
  },
  {
    label: '내정보',
    icon: <UserIcon fontSize="16px" color="primary" />,
  },
];

 

 

실제로 사용할 때에는 문제가 없는 코드이지만, 같은 Style Props가 중복되었습니다.

또한 상수로 배열을 분리했을때, 상태를 전달받기 어렵다는 단점도 있었습니다.

 

때문에 아래와 같은 방식으로 리팩토링이 가능했습니다.

const iconList = [
  {
    label: '검색',
    icon: SearchIcon,
  },
  {
    label: '선물하기',
    icon: GiftIcon,
  },
  {
    label: '내정보',
    icon: UserIcon,
  },
];

interface IconButtonProps extends ButtonProps {
    title: ReactNode;
    Icon: ElementType;
}

const CustomIconButton = ({title, Icon, ...props} : IconButtonProps) => {

    const IconComponent = (
        <Icon color={props.isDisabled ? 'white' : 'point'} fontSize="16px" />
    );    

    return (
        <>
        ...
        {IconComponent}
        </>
    )
}

 

 

이렇게 대상 컴포넌트만 전달하고, 다른 스타일 및 제어는 따로 담당하는 컴포넌트를 분리하니 문제가 해결되었습니다.