Next.js 에서 Link 에서 passHref 는 어떤 상황에서 사용해야 하는건가요 ?

a 태그와 Link tag의 관계에서 passhref가 어떻게 사용되는지 참고할만한 링크를 남겨놓을게요!! 저도 이 블로그를 보고 많이 깨달았던것 같습니다. https://f-dever-error-log.tistory.com/56

Next.js에서 'passHref'를 사용하는 이유는 주로 커스텀 컴포넌트를 사용하거나, 링크를 클릭했을 때 기대하는 동작을 위해 '<a>' 태그의 href 속성을 전달해야 하는 상황에서 필요합니다. '<Link>' 컴포넌트를 사용할 때, 기본적으로 '<Link>' 태그 내부에 '<a>' 태그를 사용하는 것이 좋습니다. 그러나 이 예제에서처럼, '<a>' 태그 대신 다른 요소를 사용하려는 경우 'passHref'를 사용해야 합니다. 이 옵션은 '<Link>' 컴포넌트가 자식 요소에게 href 속성을 전달할 수 있게 해줍니다. #1 예를 들어, 다음과 같은 커스텀 컴포넌트를 만들어보겠습니다 #2 <Link> 컴포넌트에서 이 커스텀 컴포넌트를 사용하려면, passHref 속성을 사용하여 href 속성을 전달해야 합니다. 이렇게 하면 클릭 가능한 링크로 동작하게 됩니다. 결론적으로, 'passHref'는 다음과 같은 상황에서 사용해야 합니다: '<a>' 태그 대신 다른 요소를 클릭 가능한 링크로 사용하려는 경우 커스텀 컴포넌트를 '<Link>'의 자식 요소로 사용하려는 경우 'passHref'를 사용하면 이러한 상황에서도 올바른 동작을 보장할 수 있습니다.

1#1
2
3const CustomComponent = React.forwardRef(({ onClick, href }, ref) => (
4  <h1 onClick={onClick} ref={ref}>
5    제목 - 커스텀 컴포넌트
6  </h1>
7));
8
9
10#2
11
12<Link href="/article/1234" passHref>
13  <CustomComponent />
14</Link>