Link (링크)

Va.Link — 하이퍼링크 컴포넌트

브라우저 표준 <a> 태그를 감싸는 얇은 래퍼입니다. 프레임워크의 이벤트 시스템·CSS 테마·상태 관리에 편입시킨 것 외에는 표준 HTML 링크와 거의 동일하게 동작합니다.

• 클래스: Va.Link — va_component.js:11446
• short name: link
• 상속: Va.Component
• DOM 태그: <a> (앵커)
• isContainer: false
• 베이스 CSS: va-link

---

1. 기본 사용

{
    tagName: 'link',
    innerHTML: 'Microsoft',
    href: 'http://www.microsoft.co.kr',
    target: '_new'
}

렌더 결과:

Microsoft

href 없이 단순 라벨로 쓸 수도 있고(그럴 땐 onClick으로 프로그램적 이동), 표준 링크처럼 쓸 수도 있습니다.

---

2. 다른 버튼/텍스트 컴포넌트와의 차이

항목Va.ButtonVa.LinkVa.Span

DOM 태그	<button>	<a>	<span>
시맨틱	액션 트리거	네비게이션	텍스트
href / target	✕	✓	✕
브라우저 히스토리 진입	✕	✓ (표준)	✕
우클릭 "새 탭에서 열기"	✕	✓	✕
SEO 크롤러 인식	✕	✓	✕
시각 스타일	버튼 look	밑줄 텍스트 look	인라인 텍스트
상태 (pressed/selected)	✓	없음 (disabled만)	없음

한 줄 요약: "액션 트리거가 아니라 이동을 뜻할 때" 쓰는 컴포넌트. HTML 시맨틱 규칙과 접근성을 지키기 위해 Button 대신 Link를 선택하는 상황에 맞습니다.

---

3. 속성

속성타입설명

text	string	순수 텍스트 (선언은 안 되어 있지만 update()가 처리함)
innerHTML	string	HTML 포함 라벨. Va._sanitize 적용
href	string	링크 URL
target	string	_blank, _self, _new, 프레임 이름 등
size	string	small / medium / large (CSS 클래스로 반영)
disabled	boolean	비활성화 (클래스로 반영, 실제 <a>의 href 무효화는 CSS pointer-events 등으로 처리 필요)

⚠️ text는 properties 배열에 선언이 빠져 있지만 update() 로직에는 있습니다. innerHTML을 우선 쓰는 게 정석. Demo도 전부 innerHTML을 사용.

⚠️ 흔히 기대하는 download, rel(nofollow/noopener) 같은 앵커 속성은 옵션으로 노출되어 있지 않습니다. 필요하면 생성 후 component.element.setAttribute('rel', 'noopener')로 직접 세팅.

---

4. 이벤트

이벤트시그니처발생 시점

click	(component, element, evt)	클릭
contextmenu	(component, element, evt)	우클릭 (기본 컨텍스트 메뉴 유지)
focus	(component, element, evt)	포커스 진입 + selected 클래스 자동 부여
blur	(component, element, evt)	포커스 이탈 + selected 클래스 자동 제거

주목: focus/blur 시 selected 클래스를 자동 토글해 시각 상태를 표현합니다 (va_component.js:11469-11476).

⚠️ click 이벤트에서 evt.preventDefault()가 자동 호출되지 않습니다 — 즉, href가 있으면 콜백 실행 후 브라우저 기본 이동이 그대로 일어남. SPA 라우팅 등으로 이동을 가로채고 싶다면 콜백에서 명시적으로 evt.preventDefault() 호출:

onLinkClick(component, element, evt) {
    evt.preventDefault();
    Va.setRouterUrl('main', '/some/route');
}

---

5. 메서드

메서드설명

setInnerHTML(html)	HTML 라벨 변경 (내부에서 Va._sanitize 적용)
setDisabled(bool)	비활성화 토글

주의: 다른 버튼 컴포넌트에 흔한 setText, setHref, setTarget, setSize, focus, blur 같은 setter/헬퍼가 정의되어 있지 않습니다. 필요하면:

• 값 변경: component.href = 'new-url'; component.update()
• 포커스: component.element.focus()

Demo의 setReadOnly 호출은 실제로 정의된 메서드가 없어 오류가 날 수 있습니다 (Demo의 onReadOnly/onUnReadOnly 참조 → 실제 메서드 부재).

---

6. 내부 구조

방금 수정한 버그 반영 후 정상 구조:

<a elname="element" class="va-link [size] [selected] [disabled]"
   href="..." target="..." tabindex="0">
  텍스트 또는 sanitized HTML
</a>

지극히 단순합니다. Button처럼 inner span이나 icon element를 두지 않고, <a> 태그 자체에 텍스트를 직접 넣는 구조.

---

7. 스타일

base CSS: va-link 클래스 하나만 부여됩니다. 색상·밑줄·hover 효과는 테마 CSS(va-light.css, va-dark.css 등)에서 정의된 .va-link 규칙이 담당합니다.

size 3단계: small / medium / large — 폰트 사이즈만 조정, 다른 버튼들처럼 xsmall/xlarge까지 5단계는 아닙니다.

appearance / shape 없음: 버튼 계열의 appearance(primary/secondary 등), shape(circular/square 등)는 존재하지 않습니다. Link는 시각 배리언트가 훨씬 단순한 컴포넌트.

---

8. 접근성 (a11y)

• tabIndex="0" 자동 세팅 → 키보드 탭 순회 대상
• 표준 <a> 태그 → 스크린리더가 "link"로 인식, 우클릭 컨텍스트 메뉴 정상 동작
• focus 시 selected 클래스 자동 → CSS로 focus indicator 커스터마이즈 가능
• disabled 클래스만 부여 → 실제 링크 이동을 막으려면 CSS pointer-events: none을 함께 적용하거나, onClick에서 preventDefault 필요

---

9. 언제 쓰나

Link가 맞을 때

• 다른 페이지·URL·문서로 이동 ("자세히 보기", "이용약관", "회사 홈페이지")
• 페이지 내 앵커 이동 (href: '#section-2')
• 새 탭에서 열기 (target: '_new' 또는 '_blank')
• 이메일/전화 링크 (href: 'mailto:...', href: 'tel:...')
• SEO에 유리한 링크로 노출되어야 하는 경우

Button을 쓸 때

• 액션 실행 (저장/삭제/제출) — 이동이 아니라 상태 변경
• 팝업 열기, 폼 전송 등 페이지에 머무는 동작
• 시각적으로 버튼처럼 강조되어야 하는 CTA (Call-to-Action)

혼용 위험: "링크처럼 보이지만 실제로는 액션"인 UI를 자주 보게 되는데, 시맨틱상 이는 잘못된 사용입니다. 액션이면 Button, 이동이면 Link.