인터렉션이 가능한 태그 중첩 안시키기

기묘하개

목차

1. 문제

2. 해결

---

1. 문제

🔴 인터랙션 가능한 태그를 중첩시킴

<Link href="/items">
  <Button size="lg" onClick={() => console.log("page")}>
    로그인
  </Button>
</Link>

문제의 코드로, 보면 Link 태그 내부에 Button 태그가 들어가 중첩되어 있는 상태이다.

하지만 인터랙션이 가능한 태그(button, a, input 등)는 중첩시키지 않는 것이 표준이다.

이벤트 내부에서 또다른 클릭이벤트가 발생하여 브라우저나 스크린리더가 혼란을 겪을 수 있기 때문이다.

 

---

2. 해결

🟢 LinkButton 컴포넌트 만들기

LinkButton은 쓰임이 여기저기 더 있으므로, 공용 컴포넌트로 만들어서 사용해도 좋을 것 같다.

wrapper 패턴을 적용하는 방향으로 수정해볼 거다.

 

Button 컴포넌트 수정

return (
    <button
      ref={ref}
      className={clsx(classes, className)}
      disabled={disabled}
      onClick={onClick}
      {...rest}
    >
      {children}
    </button>
  );

기존 버튼 컴포넌트는 <button> 태그를 리턴하는 방식이었다.

하지만 이 방식을 유지하면 LinkButton에서 Button 컴포넌트를 import하여 wrapper로 사용하더라고 여전히 중첩이 발생한다.

 

여기에서 Slot Component를 사용할 수 있다.

https://www.npmjs.com/package/@radix-ui/react-slot

 

Slot은 자식 컴포넌트를 래핑하지 않고, 자식의 props와 스타일을 병합시켜 렌더링하는 컴포넌트이다.

즉, 자식을 직접 렌더링하되, 부모의 스타일과 속성을 합치는 느낌이다.

// ❌ 일반 컴포넌트 : button안에 Link가 중첩됨 ( children = <Link>링크</Link> )
<div>
  <button>
    {children}
  </button>
</div>

// ⭕ slot 컴포넌트 : button안에 Link가 중첩되지 않음  ( children = 링크 )
<div>
  <Link>
    {children}
  </Link>
</div>

 

Slot 사용을 위해 npm으로 설치를 해줬다.

 

npm install -D @radix-ui/react-slot # Slot 설치

 

Slot이 아닌 경우 원래대로 "button"을 주기 위해 Comp를 정의한 후, return에서 button 대신 Comp를 사용한다.

const Comp = asChild ? Slot : "button";	// asChild는 boolean으로 선언
// ...

return (
    <Comp
      ref={ref}
      className={clsx(classes, className)}
      disabled={disabled}
      onClick={onClick}
      {...rest}
    >
      {children}
    </Comp>
  );

 

 

LinkButton 컴포넌트 작성

import Link from "next/link";
import Button, { ButtonProps } from "../base/Button";

interface LinkButtonProps extends ButtonProps {
  href: string;
}

const LinkButton = ({ href, children, ...props }: LinkButtonProps) => {
  return (
    <Button asChild {...props}>
      <Link href={href}>{children}</Link>
    </Button>
  );
};

export default LinkButton;

 

LinkButtonProps는 ButtonProps를 상속받아서 href만 추가하도록 했다.

asChild를 활성화하면 중첩 문제도 해결된다.

 

 

 

 

참고

https://www.reddit.com/r/HTML/comments/lsky98/psa_you_cannot_nest_interactive_elements/

Reddit의 HTML 커뮤니티

https://wkl0083.tistory.com/183

🔌 React에서 Slot 패턴 구현해보기 – children 조합으로 유연한 컴포넌트 만들기