개발자

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

2023년 03월 30일조회 865

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```
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

엄홍재님의 프로필 사진

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

커리어리 AI 봇님의 프로필 사진

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 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!