0Pricing
TypeScript Academy · 강의

다형성 컴포넌트와 as Props

as Props를 사용하는 다형성 Button 컴포넌트를 만들고, 내장·DOM Props를 병합하며, forwardRef와 ComponentRef 로 refs 타입을 지정합니다.

다형성 컴포넌트와 as Props은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 1개의 강의가 포함되어 있습니다.

소개

목표: button, a 또는 렌더링 대상 속성을 통해 모든 요소로 렌더링할 수 있는 하나의 다형성 Button을 만드십시오. 이때 속성과 ref 타입을 유지해야 합니다.

  • T를 React.ElementType으로 제한하기
  • 속성을 안전하게 병합하기
  • 전달되는 ref에 타입 지정하기

기본 타입

OwnProps로 시작하고, T의 내장 속성과 사용자 고유 속성을 병합하는 유틸리티 PolymorphicProps<T, P>를 사용하십시오.

import React from "react"

type OwnProps = {
  variant?: "solid" | "outline"
  children: React.ReactNode
}

type PolymorphicProps<T extends React.ElementType, P> = {
  as?: T
} & P & Omit<React.ComponentPropsWithoutRef<T>, keyof P | "as">

// Example: Omit avoids prop collisions (e.g., our OwnProps vs intrinsic props)

다형성 Button

Component의 기본값은 button이지만 as를 허용합니다. ref 타입은 T에 따라 바뀝니다(예: "a"의 경우 HTMLAnchorElement).

import React, { forwardRef } from "react"

type OwnProps = { variant?: "solid" | "outline"; children: React.ReactNode }

type PolymorphicProps<T extends React.ElementType, P> = { as?: T } & P & Omit<React.ComponentPropsWithoutRef<T>, keyof P | "as">

const ButtonInner = <T extends React.ElementType = "button">(
  { as, variant = "solid", children, ...rest }: PolymorphicProps<T, OwnProps>,
  ref: React.ForwardedRef<React.ComponentRef<T>>
) => {
  const Component = (as || "button") as React.ElementType
  const style = variant === "outline" ? { border: "1px solid #333", padding: 8 } : { background: "#2563eb", color: "white", padding: 8, borderRadius: 6 }
  return <Component ref={ref} style={style} {...rest}>{children}</Component>
}

export const Button = forwardRef(ButtonInner) as <T extends React.ElementType = "button">(
  props: PolymorphicProps<T, OwnProps> & { ref?: React.Ref<React.ComponentRef<T>> }
) => JSX.Element

사용 예시

as="a"일 때 href와 같은 내장 속성을 사용할 수 있으며 ref는 HTMLAnchorElement로 타입이 지정됩니다.

import React, { useRef } from "react"
import { Button } from "./Button"

export default function App() {
  const btnRef = useRef<HTMLButtonElement>(null)
  const linkRef = useRef<HTMLAnchorElement>(null)

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Button ref={btnRef} onClick={() => alert("clicked")}>Save</Button>
      <Button as="a" ref={linkRef} href="#docs" variant="outline">Docs</Button>
    </div>
  )
}

변형

다형성 Component를 감싸면서도 유연성을 유지할 수 있습니다. ComponentProps<typeof Button>을 사용하여 해당 속성을 상속하십시오.

import React from "react"
import { Button } from "./Button"

export function DangerButton(props: Omit<React.ComponentProps<typeof Button>, "variant">) {
  return <Button {...props} style={{ background: "#dc2626", color: "white", padding: 8, borderRadius: 6 }} />
}

// Works with polymorphism too
export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <DangerButton>Delete</DangerButton>
      <DangerButton as="a" href="#confirm">Delete link</DangerButton>
    </div>
  )
}

팁

팁:

  • T를 React.ElementType으로 제한하십시오.
  • 속성 이름 충돌을 해결하려면 Omit을 사용하십시오.
  • forwardRef로 ref를 전달하고 React.ComponentRef<T>로 타입을 지정하십시오.

다형성 타입 지정 확인

빠른 확인: ref를 전달하는 다형성 Component를 올바르게 모델링하는 타입 지정은 무엇입니까?

복습

복습: as 속성을 사용하는 다형성 Button을 만들고, 내장 속성을 안전하게 병합했으며, 전달되는 ref에 타입을 지정하여 사용하는 쪽에서 올바른 코드 자동 완성을 얻도록 했습니다.

자주 묻는 질문

“다형성 컴포넌트와 as Props” 강의는 무료인가요?

네 — “다형성 컴포넌트와 as Props” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 1개의 강의가 포함되어 있습니다.

“다형성 컴포넌트와 as Props”에서 뭘 배우나요?

as Props를 사용하는 다형성 Button 컴포넌트를 만들고, 내장·DOM Props를 병합하며, forwardRef와 ComponentRef 로 refs 타입을 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 1개 중 1번째 강의입니다.

“다형성 컴포넌트와 as Props” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

← TypeScript Academy(으)로 돌아가기