Portfolio

🔥 문제

다음과 같이 Next/Link를 사용하면 forwardRef를 사용하라는 이슈가 나온다. 이유가 왜 그럴까?

⭐ 해결 방법

이유는 매우 간단했는데, passHref 때문이었다.

passHref의 내부 원리는 ref를 컴포넌트에 전달하는 것인데, 여기서 Custom Component는 ref가 있어야 하기 때문이다.

따라서... ref가 없는 Text 컴포넌트에서는 Next의 권장 방식과는 상이한 로직이므로 이런 경고 메시지가 발생하는 것이다.

따라서 해결방법은, a태그를 한 번 감싸줌으로써 마치 a 태그를 만든 것처럼 하는 트릭이 있다.


import React from 'react';
import styled from '@emotion/styled';
import Text from '@components/atoms/Text';
import Link from 'next/link';

interface NavigatorProps {
  userType: 'user' | 'owner';
}

const NavigatorContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
`;

const fontStyle = {
  marginBottom: '40px',
};

const dynamicUrl = {
  user: '/owner/change',
  owner: '/shop',
};

const dynamicTitle = {
  user: '사업자 전환',
  owner: '가게 보기',
};

const Navigator: React.FC<NavigatorProps> = ({ userType, ...props }) => {
  return (
    <NavigatorContainer {...props}>
      <Text block size="large" style={fontStyle}>
        설정
      </Text>
      {/* eslint-disable @next/next/no-html-link-for-pages */}
      <Link href="/likes/event">
        <a href="/likes/event">
          <Text block size="medium" style={fontStyle}>
            즐겨찾기 / 좋아요
          </Text>
        </a>
      </Link>
      <Link href="/history/events" passHref>
        <a href="/history/events">
          <Text block size="medium" style={fontStyle}>
            활동내역
          </Text>
        </a>
      </Link>
      <Link href="/profile/edit" passHref>
        <a href={dynamicUrl[userType]}>
          <Text block size="medium" style={fontStyle}>
            프로필 수정
          </Text>
        </a>
      </Link>
      <Link href={dynamicUrl[userType]} passHref>
        <a href={dynamicUrl[userType]}>
          <Text block size="medium" style={fontStyle}>
            {dynamicTitle[userType]}
          </Text>
        </a>
      </Link>
      <Link href="/" passHref>
        <a href="/">
          <Text block size="medium" style={fontStyle}>
            로그아웃
          </Text>
        </a>
      </Link>
    </NavigatorContainer>
  );
};

export default Navigator;

결과적으로 에러를 내뱉지 않는다. 🌈

👏🏻 참고자료

https://github.com/vercel/next.js/issues/7915

https://stackoverflow.com/questions/66421459/warning-function-components-cannot-be-given-refs

Next Link Issue - ForwardRef

🔥 문제

⭐ 해결 방법

👏🏻 참고자료