오류 | Link 태그에 a태그 대신, 컴포넌트 입력시 발생하는 오류(feat. Next.js)

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

 

❓상황

Next.js <Link> 태그에 <a>태그를 넣는것 대신, 컴포넌트를 넣을때 발생하는 오류

 

🔎 원인 파악

Next.js의 <Link> 태그로 감싸진 <a>태그는 (onClick, onMouseEnter), ref 총 3개의 필수 속성을 갖는다.

 

<Link> 태그 안에 <a>태그를 넣으면, 별 문제없이 잘 동작한다.

<Link href="/auth/signup">
  <a>회원가입</a>
</Link>

 

그러나 컴포넌트를 사용할 경우, onClick, onMouseEnter, ref 속성을 갖도록 해줘야한다.

<Link href="/auth/signup">
  <Button>회원가입</Button>
</Link>

 

그래서 아래와 같이 ...연산자를 이용하여 속성을 부여했다.

const Button = ({ children, ...rest }: any) => {
  return (
    <SButton {...rest}>
      {children}
    </SButton>
  );
};

 

컴포넌트의 경우에는 forwardRef 함수를 이용해야만 ref 속성을 부여할 수 있다는 것을 알게되었다.

 

✨ 해결 방법

1. forwardRef를 이용하여 ref 속성을 부여한다. : 내가 채택한 해결 방법

const Button = forwardRef(({ children, ...rest }: any, ref: any) => {
  return (
    <SButton {...rest} ref={ref}>
      {children}
    </SButton>
  );
});

 

2. forwardRef 함수를 이용하지 않고, 컴포넌트를 <a>태그로 감싼다.

<Link href="/auth/signup">
  <a>
    <Button>회원가입</Button>
  </a>
</Link>