ref, as 를 제공하는 컴포넌트

[healtheloper]

예상 동작

현재 FlexBox 에서 ref, as 를 넣는 기능이 있습니다.

1. ref, as 는 다양한 컴포넌트에서 필요로 할 수 있다는 점
2. FlexBox 가 가져야할 기능인가? ( FlexBox 내부에서 구현이 되어야 하는가? )

라는 의문이 들어 별도로 분리하여 primitives 로 제공하고자 합니다.

이름은 View, Wrapper 등으로 생각해 보았는데 의견 있으시면 남겨주세요

// 전

const Wrapper = styled.div`
  display: flex;
`;

const FlexBox: FlexBoxComponent = forwardRef(
  <T extends ElementType = 'div'>(
    props: FlexBoxProps<T>,
    ref: ComponentPropsWithRef<T>['ref'],
  ) => {
    const { as = 'div', children, sx } = props;
    const theme = useTheme();
    const css = sx && getFlexCssProperties(sx, theme);
    return (
      <Wrapper ref={ref} as={as} css={css}>
        {children}
      </Wrapper>
    );
  },
);

// 후

const Wrapper = forwardRef(() => { ... })

const FlexBox: FlexBoxComponent = (props: FlexBoxProps) => {
    const { as = 'div', children, sx, ref } = props;
    const theme = useTheme();
    const css = sx && getFlexCssProperties(sx, theme);
    return (
      <Wrapper ref={ref} as={as} css={css}>
        {children}
      </Wrapper>
    );
  },
);

[healtheloper]

ref 를 props 로 전달할 수 없고 그렇다고 다른 prop 의 이름으로 제공하기에는 혼란을 주는 것 같아서
forwardRef 로 감싸는 형태처럼 처리해보려 시도하는 중...

[healtheloper]

시도한 방법

type WrapperProps<T extends ElementType> = {
  as?: T;
} & ComponentPropsWithoutRef<T>;

type WrapperComponent = <C extends ElementType = 'div'>(
  props: WrapperProps<C> & { ref?: ComponentPropsWithRef<C>['ref'] },
) => ReactElement | null;

const Box: WrapperComponent = forwardRef(
  <T extends ElementType = 'div'>(
    props: WrapperProps<T>,
    ref: ComponentPropsWithRef<T>['ref'],
  ) => {
    const { as = 'div', children } = props;
    const Component = as;

    return <Component ref={ref}>{children}</Component>;
  },
);