as="link"? 왜 작동 안 하는지

👿문제상황

스타일 가이드가 나왔고 , 그에 맞게 텍스트를 공통 컴포넌트로 뺐다.

<Text as="link" href="/">
  서비스 소개
</Text>

 

그후에 링크태그에 위와 같이 적용을 하고싶었는데

바로 오류가 떴다고 한다,,

🤔원인추론

재사용 가능한 컴포넌트로 사용하기 위해서 Test.tsx에서 as 로 태그 변경을 할수 있게 하였다.

<Text as="h1" variant="display1" color="danger">
  경고 메시지!
</Text>

 

그런데 여기서주의할 점은, HTML코드로만 변경이 가능하다는 점이다.

• 단순성: HTML 태그는 표준화된 속성(예: className, id, href)을 가지므로, as로 전달된 태그에 prop을 안전하게 전달하기 쉽다.
• 타입 안정성: 타입스크립트를 사용할 경우, as를 keyof JSX.IntrinsicElements로 제한하면 HTML 태그만 허용되며, 타입 에러를 방지할 수 있다.
• 예측 가능성: React 컴포넌트는 내부 로직이나 prop 요구사항이 다양하므로, as로 임의의 컴포넌트를 허용하면 예상치 못한 동작(예: 필수 prop 누락, 스타일 충돌)이 발생할 수 있다.

내가 위에서 사용하려고 한 링크태그는 원래 next/link의 Link태그 였기때문에

이는, html태그가 아님으로 내 생각대로 Link태그로 바꿀수 없었다.

 

⚒️해결방법

 

이를 해결할수 있는 방법은 두가지가 있었다.

 

방법 1: <Link>로 <Text as="a"> 감싸기

<Link href="/">
  <Text as="a" variant="link">
    서비스 소개
  </Text>
</Link>

방법 2: <Text as={Link}> 허용

<Text as={Link} href="/" variant="link">
  서비스 소개
</Text>

 

벙법2를 사용하였을때 가져다 쓰기는 편리하지만, 나는 방법 1을 택했다,

왜냐면

• 이미 타입스크립트로 프로젝트를 진행하고 있었기 때문에, 타입안정성을 위해서 더 정확하다고 판단하였다.
• <Text as={Link}>처럼 다른 컴포넌트를 직접 넣으면, 비정상 동작이 발생할 가능성이 있음
• <a> 없이 Link만 쓰면 스크린 리더에서 링크로 인식되지 않거나, SEO 분석에서 누락되어 접근성이 보장되지 않을수 있다.

결론적으로 타입안정성 / 정상적인 라우팅 / 접근성 보장 의 문제로 

쪼금 귀찮을수 있지만 링크태그로 감싸 해결할수 있었다!