라이브러리의 프레임워크 바인딩

라이브러리 패키지의 프레임워크 바인딩은 프레임워크의 API를 라이브러리에서 직접 활용하여 라이브러리 코드를 프레임워크와 더욱 깊이 통합합니다.

이를 위해 라이브러리의 package.json에서 peerDependencies 필드를 사용합니다. 이렇게 하면 패키지에 직접 설치하지 않고도 프레임워크 API를 라이브러리에서 사용할 수 있습니다.

예시

바인딩을 생성하려는 의존성에 대해 라이브러리에 peerDependency를 추가합니다.

{
  "name": "@repo/ui",
  "peerDependencies": {
    "next": "*"
  }
}

이렇게 하면 라이브러리에서 의존성을 사용할 수 있게 되어 아래와 같은 코드를 작성할 수 있습니다. className prop에 주목하세요. 이 prop은 모노레포에서 이 컴포넌트의 기본 스타일을 설정하며 props 객체에서 재정의할 수 있습니다.

import Link from 'next/link';
import type { ComponentProps } from 'react';
 
type CustomLinkProps = ComponentProps<typeof Link>;
 
export function CustomLink({ children, ...props }: CustomLinkProps) {
  return (
    <Link className="text-underline hover:text-green-400" {...props}>
      {children}
    </Link>
  );
}

패키지에 대해 해석될 next의 버전은 라이브러리 소비자로부터 가져옵니다. 예를 들어, 애플리케이션에 Next.js 15가 설치되어 있으면 next에 대한 TypeScript 타입과 API도 Next.js 15가 됩니다.

진입점을 사용하여 프레임워크 바인딩 분리

Export 경로를 사용하여 패키지를 프레임워크별 진입점으로 분리하는 것은 여러 프레임워크를 지원하고자 하는 라이브러리에 바인딩을 추가하는 가장 간단한 방법입니다. 진입점을 분리하면 번들러가 대상 프레임워크를 더 쉽게 이해할 수 있으며 이상한 번들링 오류가 발생할 가능성이 줄어듭니다.

아래 예시는 서로 다른 유형의 링크 컴포넌트를 위한 두 개의 진입점이 있는 라이브러리를 보여줍니다. 이러한 추상화는 래핑하는 요소 위에 자체 스타일, API 및 기타 조정을 포함할 가능성이 높습니다.

• ./link: 디자인 시스템의 일부 기본 스타일이 적용된 <a> HTML 태그
• ./next-js/link: 조직의 선호도에 맞게 사전 설정된 props가 있는 Next.js Link 컴포넌트의 사용자 정의 버전
• ./svelte/link: 사전 설정이 있는 Svelte용 a 태그의 사용자 정의 버전

{
  "exports": {
    "./link": "./dist/link.js",
    "./next-js/link": "./dist/next-js/link.js"
  },
  "peerDependencies": {
    "next": "*"
  }
}

이 개념은 바인딩을 제공하려는 여러 프레임워크나 기타 의존성에 적용할 수 있습니다.