인프런 커뮤니티 질문&답변

저는 평소에 아래와 같이 ComponentPropsWithoutRef을 이용하여 children이나 스타일등을 props로 내려받아 사용하고 있엇는데

export interface Props {
  /** 북마크 여부 */
  isBookmark: boolean;
  /** 클릭했을 때 호출할 함수 */
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

export const Bookmark = (Props: Props & ComponentPropsWithoutRef<"button">) => {
  return (
    <ButtonStyle {...Props}>
      <BookmarkIcon isBookmark={Props.isBookmark} />
    </ButtonStyle>
  );
};

export default Bookmark;

강의에서는 아래와같이 FC<PropsWithChildren<Props>> 형식으로 받아 오던데 둘이 어떤 차이가 있을까요?

interface Props {
  show: boolean;
  onCloseModal: () => void;
  style: CSSProperties;
  closeButton?: boolean;
}

const Menu: FC<PropsWithChildren<Props>> = ({ closeButton, style, show, children, onCloseModal }) => {
  const stopPropagation = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {
    event.stopPropagation();
  }, []);

  if (!show) {
    return null;
  }
  return (
    <CreateMenu onClick={onCloseModal}>
      <div onClick={stopPropagation} style={style}>
        {closeButton && <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton>}
        {children}
      </div>
    </CreateMenu>
  );
};