TypeScript Academy · 강의

제네릭과 추론을 사용하는 사용자 지정 훅

값, 결과 및 오류에 를 사용하는 재사용 가능한 사용자 지정 훅을 작성하고, 안전한 API를 위해 추론과 제약 조건을 활용합니다.

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

소개

목표: 네이티브 API처럼 사용할 수 있는 제네릭 훅을 만드십시오. 타입이 지정된 localStorage 훅, 비동기 로더, 제어/비제어 도우미를 구현합니다. 호출하는 쪽에서 타입을 거의 직접 지정하지 않도록 추론을 활용합니다.

React와 비슷하게 사용하기 위해 튜플 반환하기
필요할 때 제약 조건 사용하기
임의 타입 사용하지 않기

useLocalStorage<T>

useState처럼 [value, set] 튜플을 반환하십시오. 값과 설정 함수에서 T가 일관되게 유지되도록 하십시오.

import { useEffect, useState } from "react"

export function useLocalStorage<T>(key: string, initial: T): [T, (v: T | ((prev: T) => T)) => void] {
  const [value, setValue] = useState<T>(() => {
    try {
      const raw = localStorage.getItem(key)
      return raw ? (JSON.parse(raw) as T) : initial
    } catch {
      return initial
    }
  })

  useEffect(() => {
    try { localStorage.setItem(key, JSON.stringify(value)) } catch {}
  }, [key, value])

  const set = (v: T | ((prev: T) => T)) => {
    setValue(prev => (typeof v === "function" ? (v as (p: T) => T)(prev) : v))
  }

  return [value, set]
}

// Usage
// const [user, setUser] = useLocalStorage("user", { id: 1, name: "Ada" })

useAsync<T>

value, error, loading이 있는 객체를 반환하십시오. value의 타입은 fn이 반환하는 프로미스에서 추론됩니다.

import { useEffect, useState } from "react"

export function useAsync<T>(fn: () => Promise<T>, deps: unknown[] = []) {
  const [value, setValue] = useState<T | null>(null)
  const [error, setError] = useState<unknown>(null)
  const [loading, setLoading] = useState<boolean>(false)

  useEffect(() => {
    let cancelled = false
    setLoading(true)
    fn().then(
      (v) => { if (!cancelled) { setValue(v); setError(null) } },
      (e) => { if (!cancelled) { setError(e); setValue(null) } }
    ).finally(() => { if (!cancelled) setLoading(false) })
    return () => { cancelled = true }
  }, deps)

  return { value, error, loading }
}

// Usage
// const { value, error, loading } = useAsync(() => fetch("/api").then(r => r.json()))

useControlled<T>

하나의 도우미로 제어 및 비제어 패턴을 모두 지원하십시오. 튜플을 사용하면 T가 일치하게 유지됩니다.

import { useState } from "react"

type ControlledProps<T> = {
  value?: T
  defaultValue: T
  onChange?: (v: T) => void
}

export function useControlled<T>({ value, defaultValue, onChange }: ControlledProps<T>): [T, (v: T) => void] {
  const [inner, setInner] = useState<T>(defaultValue)
  const isControlled = value !== undefined
  const current = isControlled ? (value as T) : inner
  const set = (v: T) => { isControlled ? onChange?.(v) : setInner(v) }
  return [current, set]
}

// Usage
// const [v, setV] = useControlled({ value, defaultValue: "", onChange: setValue })

추론과 제약 조건

인수에서 추론하는 방식을 우선 사용하고, 훅에 특정 필드가 필요할 때만 extends 제약 조건을 추가하십시오.

// Inference works from the initial value
const [settings, setSettings] = useLocalStorage("settings", { theme: "dark", pageSize: 20 })
// T = { theme: string; pageSize: number }

// Constrain T when needed
interface WithId { id: string }
function useById<T extends WithId>(items: T[], id: string) {
  return items.find(x => x.id === id) || null
}

// Usage
const user = useById([{ id: "u1", name: "Ada" }], "u1")

팁

팁:

React처럼 사용하면서 일관된 타입 지정을 유지하려면 튜플을 반환하십시오.
공개 훅 시그니처에서 any를 절대 사용하지 마십시오.
편리한 상태 전환을 위해 업데이트 함수 (prev) => next를 허용하십시오.

훅 타입 지정 확인

빠른 확인: 제네릭 localStorage 훅에 가장 적합한 시그니처는 무엇입니까?

복습

복습: 추론을 활용하고, 필요한 경우에만 제약 조건을 사용하며, 네이티브 React API처럼 사용할 수 있는 튜플 또는 객체 결과를 제공하는 제네릭 훅을 만들었습니다.

자주 묻는 질문

“제네릭과 추론을 사용하는 사용자 지정 훅” 강의는 무료인가요?

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

“제네릭과 추론을 사용하는 사용자 지정 훅”에서 뭘 배우나요?

값, 결과 및 오류에 를 사용하는 재사용 가능한 사용자 지정 훅을 작성하고, 안전한 API를 위해 추론과 제약 조건을 활용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“제네릭과 추론을 사용하는 사용자 지정 훅” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

제네릭과 추론을 사용하는 사용자 지정 훅
Suspense와 오류 경계 타입

← TypeScript Academy(으)로 돌아가기