Wrapper 컴포넌트의 Props 타입을 어떻게 설정하시나요?

[sinibida]

다음과 같이 기존 UI 컴포넌트를 감싸는 Wrapper 컴포넌트가 있다고 할 때...

import { Button } from "@mui/material";

export type FButtonSize = "small" | "medium" | "large";
export type FButtonColor = "primary" | "secondary" | "tertiary";

export interface FButtonProps {
  size?: FButtonSize;
  color?: FButtonColor;
  children?: React.ReactNode;
  onClick?: () => void;
}

export default function FButton({
  color,
  size,
  children,
  onClick,
}: FButtonProps) {
  /* ... */

  return (
    <Button
      /* ... */
    >
      {children}
    </Button>
  );
}

내부 Button의 인터페이스(ButtonProps)를 외부에서 사용할 수 있게하려면, 어떻게 하는 게 좋을까요?

1️⃣ 상속

export interface FButtonProps extends Omit<ButtonProps, /* ... */> {
  size?: FButtonSize;
  color?: FButtonColor;
  children?: React.ReactNode;
  onClick?: () => void;
}

export default function FButton({
  color,
  size,
  children,
  onClick,
  ...rest,
}: FButtonProps) {
  /* ... */

  return (
    <Button
      /* ... */
      {...rest}
    >
      {children}
    </Button>
  );
}

2️⃣ 합성

export interface FButtonProps {
  size?: FButtonSize;
  color?: FButtonColor;
  children?: React.ReactNode;
  onClick?: () => void;
  buttonProps: ButtonProps;
}

export default function FButton({
  color,
  size,
  children,
  onClick,
  buttonProps,
}: FButtonProps) {
  /* ... */

  return (
    <Button
      /* ... */
      {...buttonProps}
    >
      {children}
    </Button>
  );
}

3️⃣ 내부 컴포넌트 인터페이스를 노출 시키면 안됨 (직접 추가)

export interface FButtonProps {
  size?: FButtonSize;
  color?: FButtonColor;
  children?: React.ReactNode;
  onClick?: () => void;
  // style, disabled, ...
}

export default function FButton({
  color,
  size,
  children,
  onClick,
  // style, disabled, ...
}: FButtonProps) {
  /* ... */

  return (
    <Button
      /* ... */
    >
      {children}
    </Button>
  );
}

[heecheon92]

경험상 1번으로 쓰다가 2,3 번으로 바꾼 기억이 있네요. (리팩토링 하면서)

만약 내가 작성한 컴포넌트가 여러 서브 컴포넌트로 이루어져 있고

이 서브 컴포넌트마다 외부에서 속성값을 전달받게 하고 싶으면 2 번이 맞는거 같아요.

다만 컴포넌트가 매우 단순하고, 서브 컴포넌트로 전달 시키고 싶은 속성값이 거의 없다면 1,3번도 나쁘진 않은거 같습니다.

추가적으로 2번은 3번만큼 직접적이지 않지만, 특정 필드만 노출 시킬 수도 있죠.

export interface FButtonProps {
  size?: FButtonSize;
  color?: FButtonColor;
  children?: React.ReactNode;
  onClick?: () => void;
  buttonProps: Pick<ButtonProps, "onBlur" | "onFocus" | "onClick">;
}

export default function FButton({
  color,
  size,
  children,
  onClick,
  buttonProps,
}: FButtonProps) {
  /* ... */

  return (
    <Button
      /* ... */
      {...buttonProps}
    >
      {children}
    </Button>
  );
}

[KimChunsick]

안녕하세요! 좋은 주제 감사드려요.

저는 상황에 따라 3가지 방법이 약간 다르지 않을까? 라는 생각이 들어요. 🤔

1. 상속

사용자(즉, 컴포넌트를 사용하는 개발자)에게 특정 컴포넌트를 유연하게 제공하고 싶을 경우에 좋아요.

예를들어. FButton이 프로젝트 내에서 너무 일반적인버튼이라 모습은 비슷하지만 커스텀이 다양하게 가능해야하는 상황처럼요.

2. 합성

사용자에게 팀의 디자인 시스템과 기반 디자인 시스템을 명확히 분리해서 접근 시킬 때 쓸 수 있을 것 같네요.

공통 스타일이나 로직은 FButton이 가져가면서, MUI가 제공하는 세세한 옵션은 사용자에게 열어줄 수 있을 것 같아요.

3. 내부 컴포넌트 인터페이스를 노출 시키면 안됨

사용자가 컴포넌트를 임의로 수정하지 못하게 통제하고 싶을 경우에 좋아요.

예를들어. FButton이 제품의 브랜딩상 무조건 이런 모습으로 보여야한다! 같은 점이 있다면 색상과 형태를 바꾸지 못하도록 관련 prop에 접근을 못하도록 할 때 처럼요.

---

저는 때에 따라서 1번과 3번 방법을 사용하는데요.

2번을 사용하지 않는 이유는 사용자 입장에서는 어짜피 같은 Button이고, 기존 MUI의 인터페이스와 최대한 비슷하게 제공하여 컴포넌트 사용시 헷갈리지 않게 하기 위해서에요.

아니면 아래 처럼 사용하구요!

<FButton>
  <Button>
  </Button>
</FButton>

[kaehehehe]

도움이 되는 답변이 될지 모르겠지만… 제 생각을 말씀드리자면 개인적으로 합성은 비추예요.

그 이유는 현재는 onClick 이벤트만 사용할 것이라고 가정하고 onClick 이벤트만 props로 내려주더라도, 시간이 지나면서 다른 이벤트들(예: onMouseEnter, onMouseLeave)이 필요해질 경우, props에 또 추가해야 하는 번거로움이 생길 수 있기 때문입니다.

그리고 FButton을 사용하는 사용자 입장에서는 내부적으로 어떤 로직으로 구성되어 있는지에 신경을 쓰지 않더라도 불편함없이 쓸 수 있는 게 베스트라고 생각합니다. 그래서 확장성을 고려하면 MUI Button 컴포넌트에 의존하고 있는 FButton의 인터페이스는 MUI Button 컴포넌트의 인터페이스를 상속하는 것이 더 적절하다고 생각해요.

이렇게 하면 사용자는 MUI Button의 모든 속성을 그대로 활용할 수 있으니까 더 유연하게 사용할 수 있고, 또 FButton 인터페이스도 심플하게 유지할 수 있지 않을까요?

import { Button, ButtonProps } from "@mui/material";

export type FButtonSize = "small" | "medium" | "large";
export type FButtonColor = "primary" | "secondary" | "tertiary";

export interface FButtonProps extends Omit<ButtonProps, "size" | "color"> {
  size?: FButtonSize;
  color?: FButtonColor;
  children?: React.ReactNode;
}

export function FButton({ size, color, children, ...rest }: FButtonProps) {
  return (
    <Button size={size} color={color} {...rest}>
      {children}
    </Button>
  );
}

export default function Example() {
  return (
    <FButton
      onClick={() => {}}
      onMouseEnter={() => {}}
      onMouseLeave={() => {}}
    >
      Button
    </FButton>
  );
}