🤔 버튼처럼 생긴 Link, 어떻게 구현하시나요?

[aahreum]

어떻게 구현하시나요?!

아래 이미지처럼 겉모습은 버튼이지만 실제 동작은 링크처럼 페이지 이동(Link)으로 작동해야 하는 UI가 종종 등장하는데요.
이럴 때 컴포넌트를 어떻게 설계하시나요??

질문을 하게된 이유

저는 스프린트 미션을 할 때 Button 컴포넌트를 하나만 만들어두고
as prop을 활용해서 버튼의 실제 태그를 바꾸는 방식으로 구현했습니다.

import classNames from 'classnames';
import styles from './Button.module.css';

const Button = ({
  as: Component = 'button',
  theme = 'primary',
  size = 's',
  children,
  full = false,
  className = '',
  ...props
}) => {
  return (
    <Component
      className={classNames(
        styles.button,
        styles[`button-${size}`],
        styles[theme],
        { [styles['button-full']]: full },
        className
      )}
      {...props}>
      {children}
    </Component>
  );
};

export default Button;

// 사용 예시
<Button as={Link} to='/about'>About</Button>

이렇게 하면 버튼 스타일을 통일하면서 <Link>로 동작하게 할 수 있어서
그 당시에는 괜찮은 방법이라고 생각했습니다.

이전 멘토링(part2)에서 이 버튼 컴포넌트 방식을 피드백을 받았는데,
구조가 너무 복잡한 것 같고 <Link><Button>...</Button></Link> 형태로 쓰는게 더 편하지 않을까요? 라는 답변을 받았어서

그 당시에는 음 그렇게 하면 되는구나 싶었는데
막상 이 방식의 HTML 구조를 보니까 이런 문제가 있더라구요.

<a href="/about">
  <button>About</button>
</a>

Link 태그 하위에 Button 태그를 두게 되면
a태그 안에 button 태그가 들어가게 되는 구조가 돼서 HTML 규칙에 맞지 않더라구요...

그래서 결국 기초 프로젝트를 할 때는 Button LinkButton 컴포넌트를 각각 구현했습니다.

// 이런 식으로 각각 나눠서 구현했습니다.
// Button.jsx
const Button = ({ children, ...props }) => (
  <button className="rounded-md bg-blue-500 px-4 py-2 text-white" {...props}>
    {children}
  </button>
);

// LinkButton.jsx
import { Link } from 'react-router';

const LinkButton = ({ to, children, ...props }) => (
  <Link
    to={to}
    className="inline-block rounded-md bg-blue-500 px-4 py-2 text-white"
    {...props}
  >
    {children}
  </Link>
);

투표

그래서 이번 프로젝트에서는 어떤 방식으로 구현하는게 좋을지
보통 어떻게 구현하는지 궁금해서 질문드립니다!
투표 하신 뒤에 간단하게 이유도 함께 남겨주시면 좋을 것 같습니다!!!!

[aahreum]

저는 1번(as prop 사용)에 투표했습니다.
버튼 스타일 관련 props를 추가할 때 한 컴포넌트만 수정하면 되어서 편리했고,
button, Link, a 세 가지 태그를 한 컴포넌트로 유연하게 관리할 수 있어서 좋았던 것 같습니다.

다만 좀 걱정되는건 자바스크립트로만 구현해본거라
타입스크립트를 적용하면 타입 설정이 다소 번거로워지지 않을까....하는 생각이 듭니다.

[aahreum]

1번으로 투표를 했는데 막상 as/asChild 방식으로 구현해보니 2번이 더 편리하다는 생각이 들었습니다.

• 타입스크립트에서 props 타입을 안전하게 처리하는 것이 아직 익숙하지 않아 복잡하게 느껴졌습니다...🫠
• 멘토님께서 공유해주신 asChild를 참고해서 간단하게 흉내내보았는데, 이 내부 동작을 제대로 구현하려면 고려할 부분들이 아주 많은 것 같아 보였고, 만약 직접 구현하지 않는다면 asChild와 Slot을 활용하기 위해 Radix 라이브러리 설치까지 해야하나? 하는 생각도 들어서 2번이 더 편리한 것 같습니다....

as는 이렇게 해보았고

import React from "react";
import styles from "./Button.module.css";

interface ASButtonProps<T extends React.ElementType> {
  as?: T;
  children: React.ReactNode;
  className?: string;
}

// T에 맞게 원하는 props를 추출하기
// Omit -> 기존에 정의한 ASButtonProps 제거 용도
type PropsWithAs<T extends React.ElementType> = ASButtonProps<T> &
  Omit<React.ComponentProps<T>, keyof ASButtonProps<T>>;

const ASButton = <T extends React.ElementType = "button">({
  as,
  children,
  className,
  ...props
}: PropsWithAs<T>) => {
  const Component = as || "button";
  return (
    <Component {...props} className={`${styles.button} ${className ?? ""}`}>
      {children}
    </Component>
  );
};

export default ASButton;

asChild는 이렇게 구현해보았습니다.

// Slot 컴포넌트
import React from "react";

interface SlotProps<T extends HTMLElement> extends React.HTMLAttributes<T> {
  children?: React.ReactElement<React.HTMLAttributes<T>>;
}

const Slot = <T extends HTMLElement>({
  children,
  ...slotProps
}: SlotProps<T>) => {
  if (!React.isValidElement(children)) {
    return null;
  }

  /**
   * slotProps는 Button 태그의 Props
   * children.props는 변경할 children 태그의 Props
   * 두 Props를 합쳐서 새 리액트 엘리먼트를 만듬
   */

  const mergedProps = {
    ...slotProps,
    ...children.props,
    // 배열로 담아서 filter 메서드로 falsy값을 제거함
    className: [slotProps.className, children.props.className]
      .filter(Boolean)
      .join(" "),
    style: { ...slotProps.style, ...children.props.style },
    onClick: (e: React.MouseEvent<T>) => {
      slotProps.onClick?.(e);
      children.props.onClick?.(e);
    },
  };

  return React.cloneElement(children, mergedProps);
};

export default Slot;

// 슬롯을 활용한 버튼
import Slot from "../core/Slot";
import styles from "./Button.module.css";

const Button = ({ asChild = false, ...props }) => {
  const Comp = asChild ? Slot : "button";
  return (
    <Comp {...props} className={`${styles.button} ${props.className ?? ""}`} />
  );
};

export default Button;

function App() {
  return (
    <BrowserRouter>
      <Button asChild>
        <Link to="/kkk">테스트</Link>
      </Button>
      <Button className="red">테스트</Button>
      <ASButton as={Link} to="/kkk">
        음
      </ASButton>
    </BrowserRouter>
  );
}

[tkp12345]

🤡 도움이 되실진 모르겠지만 얼마전에 글을 본것같아 asChild 방식도 슥 추천해봅니다 (라고하고 2번눌렀습니다 ㅎ )
https://velog.io/@ctdlog/radix-ui-aschild-pattern

[aahreum]

감사합니다!!

[yujinimda]

안녕하세요~ 6팀 박유진입니다!
멘토님께서 좋은 질문이 있다고 하셔서 확인해보았습니다.

저도 처음엔 2번에 투표했는데 이유는 asChild와 Slot을 활용하려면 Radix UI 라이브러리 설치가 필요하고
버튼 컴포넌트를 하나로 통합했을 때 아직 배우는 팀원들이 사용법을 혼동할 수 있을 것 같아서입니다..!

그런데 다른 유명한 사이트들은 어떻게 하는지 찾아보다가 결국 같은 버튼에서 조건 분기로 나누는거 같아서
TypeScript 제네릭과 컴포넌트 다형성 개념을 함께 익힐 수 있는
as 패턴을 한 번 시도해보는 것도 좋을 것 같다는 생각으로 바뀌었습니다!

참고로 에어비앤비는 as 패턴을 사용하고
넷플릭스는 as는 아니지만 조건 분기형 버튼(href 유무로 a/button 전환)을 쓰더라구요
(제가 코드를 뜯어본거라 틀릴수도있어요..!)
다른 사례들도 살펴보니 대부분 이런 식의 조건 분기형 컴포넌트 구조를 많이 사용했습니다.

물론 작은 프로젝트에서는 다소 오버프로그래밍일 수 있지만
확장성과 유지보수를 생각하면 좋은 접근이라고 생각합니다!

참고로 저는 공통 컴포넌트를 만들때
https://ui.shadcn.com/docs/components/button
이 사이트를 많이 참고합니다! 여기서는 asChild으로 되어있습니다~!

[aahreum]

안녕하세요! 유진님 7팀 이아름입니다! 좋은 의견 남겨주셔서 감사합니다!!☺️

생각보다 as 패턴을 사용하는 서비스들도 많이 있군요!
사실 저도 as 패턴을 알게된게 토스 접근성 지침을 통해서 알게되었는데,
실제로 토스에서 배포하는 디자인시스템에서도 as 패턴을 사용하고 있더라구요.
타입스크립트에 익숙해지면 as도 충분히 매력적인 것 같아요!

shadcn 추천도 감사합니다!
+) shadcn이 Radix 기반으로 만들어져서 asChild 패턴을 사용하는 것 같네요!!

[tkp12345]

이친구 결판 어떻게 낳을까요 ? ㅎ

어떤걸로 정해도 사실 상관은 없을것같습니다 해보고 구리면 바꾸면 되서
정하셨으면 오늘 멘토링떄 이야기 해볼까 해서요

[aahreum]

as 방식 도전해보기로 결정했습니다!