TypeScript Academy · 강의

Props와 children, 이벤트 처리기와 refs

타입이 지정된 Props와 children을 정의하고, 이벤트 처리기를 안전하게 연결하며, DOM 노드에 접근할 refs를 만들고 사용합니다.

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

소개

목표: 타입이 지정된 React Component를 만드십시오. 속성을 정의하고(자식 요소 포함), 정확한 타입으로 이벤트 처리기를 연결하며, ref를 사용해 입력 요소에 포커스를 맞춥니다.

타입이 지정된 속성 인터페이스
이벤트 처리기 타입
DOM 접근을 위한 ref

타입이 지정된 속성

속성 인터페이스를 선언하고, 선택적 속성을 사용한 다음 유니언 리터럴로 범위를 좁히십시오. 기본값은 Component 내부에 두십시오.

import React from "react"

interface BadgeProps {
  text: string
  color?: "primary" | "success" | "warning"
}

export function Badge({ text, color = "primary" }: BadgeProps) {
  const bg = color === "success" ? "#16a34a" : color === "warning" ? "#d97706" : "#2563eb"
  return <span style={{ backgroundColor: bg, color: "white", padding: 4, borderRadius: 6 }}>{text}</span>
}

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Badge text="Saved" color="success" />
      <Badge text="Warn" color="warning" />
    </div>
  )
}

자식 요소

PropsWithChildren<T>(또는 React.PropsWithChildren)를 사용하여 타입이 지정된 자식 요소 슬롯을 속성에 추가하십시오.

import React, { PropsWithChildren } from "react"

type CardProps = PropsWithChildren<{ title: string }>

function Card({ title, children }: CardProps) {
  return (
    <div style={{ border: "1px solid #e5e7eb", padding: 12, borderRadius: 8 }}>
      <h3 style={{ margin: 0 }}>{title}</h3>
      <div>{children}</div>
    </div>
  )
}

export default function App() {
  return (
    <Card title="Dashboard">
      <p>Children are typed automatically.</p>
    </Card>
  )
}

이벤트 처리기

React.MouseEvent<Element>와 React.ChangeEvent<HTMLInputElement>를 우선 사용하십시오. 이 타입은 타입이 지정된 대상/currentTarget을 제공합니다.

import React from "react"

export default function App() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log("clicked", e.currentTarget.name)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log("value", e.target.value)
  }

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <input name="n" onChange={handleChange} placeholder="Type here" />
      <button name="ok" onClick={handleClick}>Confirm</button>
    </div>
  )
}

ref: DOM 접근

useRef<HTMLInputElement>(null)은 null을 허용하는 ref를 유지합니다. 선택적 체이닝을 사용하여 DOM 노드에 안전하게 접근하십시오.

import React, { useRef } from "react"

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null)

  const focusInput = () => {
    inputRef.current?.focus()
  }

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <input ref={inputRef} placeholder="Focus me" />
      <button onClick={focusInput}>Focus</button>
    </div>
  )
}

ref 전달

forwardRef를 사용하면 부모가 자식 DOM 노드에 접근할 수 있습니다. 정확한 타입 지정을 위해 요소 타입을 제공하십시오.

import React, { forwardRef } from "react"

type TextInputProps = { label: string }

const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ label }, ref) {
  return (
    <label style={{ display: "grid", gap: 4 }}>
      <span>{label}</span>
      <input ref={ref} />
    </label>
  )
})

export default function App() {
  const setRef = (el: HTMLInputElement | null) => { if (el) el.focus() }
  return <TextInput ref={setRef} label="Auto focus" />
}

이벤트 타입 지정 확인

빠른 확인: 버튼 클릭 처리기에 올바른 타입은 무엇입니까?

복습

복습: 속성을 정의하고(자식 요소 포함), 이벤트에 정확한 타입을 지정하며, ref(및 forwardRef)를 사용해 DOM 노드에 안전하게 접근하십시오.

자주 묻는 질문

“Props와 children, 이벤트 처리기와 refs” 강의는 무료인가요?

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

“Props와 children, 이벤트 처리기와 refs”에서 뭘 배우나요?

타입이 지정된 Props와 children을 정의하고, 이벤트 처리기를 안전하게 연결하며, DOM 노드에 접근할 refs를 만들고 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“Props와 children, 이벤트 처리기와 refs” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

Props와 children, 이벤트 처리기와 refs
상태와 리듀서, Context 타이핑
컴포넌트 제네릭 — 입문

← TypeScript Academy(으)로 돌아가기