element 컴포넌트의 props커스텀화

[Dolphin-PC]

내용

💬 기본 틀을 setting해놓고, 활용하는 화면에서 custom하게 하고 싶을 때, button의 property를 그대로 사용할 수 있는 효율적인 방법이 있을까요?

• Button.tsx

• 예)

  // Button.tsx
  type TProps = {
  className?: HTMLButtonElement["className"];
  children: React.ReactNode;
  };
  
  const Button = (props: TProps) => {
  return (
    <button className={`w-full p-2 rounded-md ${props.className}`}>
      {props.children}
    </button>
  );
  };
  
  export default Button;
  
  // MainPage.tsx > TodoForm.tsx
  <Button className="bg-blue-300">추가하기</Button>;

이럴 경우, Button에 onClick이벤트를 붙이고 싶을 때,
Button.tsx의 Props로 onClick을 추가해주어야 하는 번거로움이 존재할 것 같습니다.

❗️ 이러한 번거로움을 해결할 수 있는 방법이 있을까 궁금합니다.

[Dolphin-PC]

기술 매니저님과의 면담 내용 정리

• tailwind와 atomic 컴포넌트의 구조는 조합이 좋지 않음. -> styled-components로 하면 어느정도 보완됨
• 위 코드처럼 하고자 하는 경우에는, props가 생길때마다 property를 추가하는 방법밖에는 없어 보임
• (...props, spread 연산자를 이용하는 방법도 있으나, ts를 사용하는 의미가 없으므로 비추천)