본문으로 건너뛰기
탐색 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정

Link — 이동과 버튼 액션을 타입으로 구분하는 Link

웹의 실제 anchor와 네이티브 Linking, 라우터 onPress 흐름을 하나의 상호 배타적 계약으로 제공하는 Expo·React Native Link입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.

Link 사용 시점과 역할

Link는 href 목적지와 라우터가 처리하는 onPress 방식 중 하나만 받습니다. 웹 목적지는 실제 anchor를 렌더링하고 네이티브는 Linking.openURL을 사용하며 동기·비동기 실패를 선택적 onOpenError로 전달합니다. primary·muted·danger 색상과 밑줄 표현도 테마로 일관되게 적용합니다.
  • href와 onPress를 함께 전달하지 못하게 하는 판별 유니언
  • 웹 실제 anchor·네이티브 Linking.openURL과 onOpenError 실패 처리
  • _blank에 noopener·noreferrer를 자동 보강하는 안전한 외부 링크

설치와 최소 예제

Link: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui

import { Link } from '@gj-kit/expo-ui';

<Link href="https://example.com/guide" target="_blank">가이드 보기</Link>

접근성과 플랫폼 동작

모든 분기는 link 역할을 제공합니다. href가 있는 웹 링크는 브라우저의 기본 anchor 키보드·컨텍스트 메뉴 동작을 유지하고, onPress 링크는 Enter로만 활성화해 Space로 누르는 button과 의미를 구분합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.