개발자
Next.js 에서 passHref 를 적용해야 한다고 들었는데 왜 그런지 이유를 잘 모르겠어요. 다음 코드는 실제 사용자 관점에서 차이가 없는것 같아요. 어떤 상황 혹은 이유때문에 passHref 를 사용해야 하는건지 궁금합니다.
1```
2<div>
3 <Link href=""/article/1234"">
4 <h1>제목 - 기본</h1>
5 </Link>
6 <Link href=""/article/1234"" passHref>
7 <h1>제목 - passHref 사용</h1>
8 </Link>
9 <Link href=""/article/1234"" passHref>
10 <a>
11 <h1>제목 - passHref 사용 + a 태그 사용</h1>
12 </a>
13 </Link>
14</div>
15```
답변 2
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>
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!