React와 TypeScript

type AppProps = { message: string }
 
function App({ message }: AppProps) {
  return <div>{message}</div>
}
 
// 반환 타입을 못 박고 싶으면
const App2 = ({ message }: AppProps): React.JSX.Element => <div>{message}</div>

type Props = {
  message: string
  count: number
  disabled: boolean
  names: string[]
  status: 'waiting' | 'success'                 // 문자열 리터럴 유니언
  obj: { id: string; title: string }
  objArr: { id: string; title: string }[]
  dict: Record<string, MyType>                   // 키 개수가 정해지지 않은 사전
  onClick: () => void                            // 가장 흔한 함수 prop
  onChange: (id: number) => void
  onInput: (e: React.ChangeEvent<HTMLInputElement>) => void
  optional?: OptionalType                        // 선택 prop
  setState: React.Dispatch<React.SetStateAction<number>>  // useState setter를 넘길 때
  children?: React.ReactNode
  style?: React.CSSProperties
}

type GreetProps = { age?: number }
 
function Greet({ age = 21 }: GreetProps) { ... }
 
// 기본값을 여러 컴포넌트가 공유할 때
const defaults = { age: 21 } satisfies GreetProps
function Greet2({ age = defaults.age }: GreetProps) { ... }

// 라이브러리가 export하지 않은 prop 타입을 꺼낸다
import { Icon } from 'component-library'
type IconName = React.ComponentProps<typeof Icon>['name']   // 'warning' | 'checkmark'

// 1) 단언: 한 번 쓸 때. 나머지 속성 검사도 사라진다
<div style={{ '--accent': 'tomato' } as React.CSSProperties} />
 
// 2) 템플릿 리터럴 키와 교차: 일반 속성 검사를 유지한다 (권장)
type CSSPropertiesWithVars = React.CSSProperties & { [key: `--${string}`]: string | number }
const style: CSSPropertiesWithVars = { color: 'white', '--accent': 'tomato' }
 
// 3) 모듈 보강: 디자인 시스템 변수 목록이 정해져 있을 때 (global.d.ts)
declare module 'react' {
  interface CSSProperties { '--accent'?: string; '--spacing'?: string | number }
}

<div ref={(node) => {
  const observer = new IntersectionObserver(onIntersect)
  observer.observe(node!)
  return () => observer.disconnect()
}} />

// 1) 네이티브 요소의 props를 통째로 이어받기: ref도 들어 있다
function MyInput(props: React.ComponentProps<'input'>) {
  return <input {...props} />
}
 
// 2) 직접 적기: 받는 ref를 원하는 하위 요소에 단다
type LabelledInputProps = { label: string; ref?: React.Ref<HTMLInputElement> }
function LabelledInput({ label, ref }: LabelledInputProps) {
  return <label>{label}<input ref={ref} /></label>
}
 
const inputRef = useRef<HTMLInputElement>(null)
<LabelledInput label="이름" ref={inputRef} />

export type CountdownHandle = { start: () => void }
 
function Countdown({ ref }: { ref?: React.Ref<CountdownHandle> }) {
  useImperativeHandle(ref, () => ({ start() { alert('Start') } }))
  return <div>Countdown</div>
}
 
const countdownRef = useRef<CountdownHandle>(null)
countdownRef.current?.start()   // 타입 추론된다

interface ButtonProps extends React.ComponentProps<'button'> {
  variant?: 'primary' | 'ghost'
}
 
function Button({ variant = 'primary', className, ...rest }: ButtonProps) {
  return <button className={`btn btn-${variant} ${className ?? ''}`} {...rest} />
}
 
<Button type="submit">저장</Button>   // type="foo"는 에러

type TextboxProps = {
  label: React.ReactNode
  onChange: (text: string) => void              // 이벤트 대신 문자열을 넘긴다
} & Omit<React.ComponentProps<'input'>, 'onChange' | 'label'>
// 겹치는 것을 모두 빼려면 Omit<..., keyof OwnProps>

// 판별 유니언: 가장 읽기 쉽다
type Props = { type: 'foo'; foo: string } | { type: 'bar'; bar: string }
function OneOrTheOther(props: Props) {
  return props.type === 'foo' ? <>{props.foo}</> : <>{props.bar}</>   // 분기마다 좁혀진다
}
 
// never로 「둘 중 하나만」
type Props2 = { foo: string; bar?: never } | { bar: string; foo?: never }
 
// 오버로드: expanded는 truncate가 있을 때만
type Common = { children?: React.ReactNode }
function Text(props: Common & { truncate?: false }): React.JSX.Element
function Text(props: Common & { truncate: true; expanded?: boolean }): React.JSX.Element
function Text({ children, truncate, expanded }: Common & { truncate?: boolean; expanded?: boolean }) {
  return <div className={truncate ? 'truncate' : ''} aria-expanded={!!expanded}>{children}</div>
}
// <Text expanded>...</Text> → 에러
 
// href로 요소를 고르기
type ButtonProps = React.ComponentProps<'button'> & { href?: undefined }
type AnchorProps = React.ComponentProps<'a'> & { href: string }
const isAnchor = (p: ButtonProps | AnchorProps): p is AnchorProps => p.href !== undefined
function Clickable(props: ButtonProps | AnchorProps) {
  return isAnchor(props) ? <a {...props} /> : <button {...props} />
}
// <Clickable href="/x" disabled /> → 에러: <a>에는 disabled가 없다

type ListProps<T> = {
  items: T[]
  renderItem: (item: T) => React.ReactNode
  getKey: (item: T) => React.Key
}
 
function List<T>({ items, renderItem, getKey }: ListProps<T>) {
  return <ul>{items.map((item) => <li key={getKey(item)}>{renderItem(item)}</li>)}</ul>
}
 
<List items={['a', 'b']} getKey={(s) => s} renderItem={(s) => s.toUpperCase()} /> // s: string
<List<number> items={['a']} ... />   // 타입 인자를 직접 주면 추론 대신 검사한다 → 에러

type TextProps<C extends React.ElementType> = { as?: C; children?: React.ReactNode } &
  Omit<React.ComponentProps<C>, 'as' | 'children'>
 
function Text<C extends React.ElementType = 'p'>({ as, ...rest }: TextProps<C>) {
  const Component: React.ElementType = as ?? 'p'   // 바깥 타입은 검사했으니 안쪽에서는 넓혀 쓴다
  return <Component {...rest} />
}
 
<Text as="a" href="/about">소개</Text>     // href 검사됨
<Text as="h2" href="/about">제목</Text>    // 에러

// 1) 인자에 이벤트 타입
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setText(e.currentTarget.value)
 
// 2) 핸들러 자체에 타입 (@types/react가 정의한 핸들러 타입)
const onChange2: React.ChangeEventHandler<HTMLInputElement> = (e) => setText(e.currentTarget.value)
 
// 폼 제출: SubmitEvent의 target은 늘 HTMLFormElement다
const onSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
  e.preventDefault()
  const data = new FormData(e.currentTarget)
}

const [user, setUser] = useState<User | null>(null)   // 나중에 채워질 값
const [items, setItems] = useState<string[]>([])       // 빈 배열은 never[]로 추론된다
const [form, setForm] = useState<User>({} as User)     // 단언: 곧바로 채운다는 약속. 안 지키면 런타임 에러

const divRef = useRef<HTMLDivElement>(null)        // DOM 참조: RefObject<HTMLDivElement | null>
useEffect(() => {
  if (!divRef.current) throw new Error('divRef is not assigned')
  divRef.current.focus()                           // 여기서는 HTMLDivElement
})
 
const sureRef = useRef<HTMLDivElement>(null!)      // null이 아니라고 단언. 조건부 렌더링이면 런타임 에러
 
const intervalRef = useRef<number | null>(null)    // 렌더링과 무관한 값 보관. 직접 쓴다
intervalRef.current = window.setInterval(tick, 1000)

type Color = 'red' | 'orange' | 'yellow'
type State = { count: number; text: string; color: Color; isGood: boolean }
type Action =
  | { type: 'SET_COUNT'; count: number }
  | { type: 'SET_TEXT'; text: string }
  | { type: 'SET_COLOR'; color: Color }
  | { type: 'TOGGLE_GOOD' }
 
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'SET_COUNT': return { ...state, count: action.count } // action은 { type: 'SET_COUNT'; count: number }
    case 'SET_TEXT': return { ...state, text: action.text }
    case 'SET_COLOR': return { ...state, color: action.color }
    case 'TOGGLE_GOOD': return { ...state, isGood: !state.isGood }
    default: {
      const _exhaustive: never = action   // 새 액션을 추가하고 처리를 빠뜨리면 컴파일 에러
      return state
    }
  }
}
 
const [state, dispatch] = useReducer(reducer, { count: 0, text: '', color: 'red', isGood: true })
dispatch({ type: 'SET_COLOR', color: 'orange' })  // color 오타나 누락은 에러

export function useLoading() {
  const [isLoading, setIsLoading] = useState(false)
  const load = (p: Promise<unknown>) => {
    setIsLoading(true)
    return p.finally(() => setIsLoading(false))
  }
  return [isLoading, load] as const   // readonly [boolean, (p: Promise<unknown>) => Promise<unknown>]
}

// useActionState(action, initialState): [state, dispatch, isPending]
// action의 두 번째 인자가 payload. <form action>에 넘기면 FormData가 온다
type State = { error: string | null }
 
async function updateName(prev: State, formData: FormData): Promise<State> {
  const name = formData.get('name')
  if (typeof name !== 'string' || !name) return { error: '이름을 입력해 주세요' }
  await saveName(name)
  return { error: null }
}
 
const [state, formAction, isPending] = useActionState(updateName, { error: null })
// <form action={formAction}>  /  버튼에서 직접 부르면 startTransition(() => formAction(fd)) 안에서
 
// useOptimistic(state, reducer): [optimisticState, addOptimistic]
const [optimisticTodos, addOptimistic] = useOptimistic(
  todos,
  (current: Todo[], newTodo: Todo) => [...current, { ...newTodo, pending: true }],
)
 
// useFormStatus (react-dom): 부모 <form>의 상태. pending이 true일 때만 data·method·action이 채워진 유니언
const { pending } = useFormStatus()

type SampleDispatch = React.Dispatch<Action>
 
const SampleStateContext = createContext<State | null>(null)
const SampleDispatchContext = createContext<SampleDispatch | null>(null)
 
export function SampleProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <SampleStateContext value={state}>
      <SampleDispatchContext value={dispatch}>{children}</SampleDispatchContext>
    </SampleStateContext>
  )
}
 
export function useSampleState() {
  const state = use(SampleStateContext)   // useContext도 같다
  if (!state) throw new Error('useSampleState는 <SampleProvider> 안에서 써야 한다')
  return state                            // State 타입
}

type MyProps = { message: string }
type MyState = { count: number }
 
class App extends React.Component<MyProps, MyState> {
  state: MyState = { count: 0 }     // 필드에도 적어야 this.state 추론이 정확하다
  pointer!: number                   // 나중에 채울 필드. 초기값 없이 선언
  increment = (amt: number) => this.setState((s) => ({ count: s.count + amt }))
  render() {
    return <div onClick={() => this.increment(1)}>{this.props.message} {this.state.count}</div>
  }
}

// app/store.ts
export const store = configureStore({ reducer: { counter: counterSlice.reducer, todos: todosSlice.reducer } })
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
 
// app/hooks.ts: store 파일과 분리해 순환 참조를 피한다 (react-redux 9.1+)
import { useDispatch, useSelector } from 'react-redux'
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
export const useAppSelector = useSelector.withTypes<RootState>()

// features/counter/counterSlice.ts
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 } as CounterState,
  reducers: {
    increaseBy: (state, action: PayloadAction<number>) => { state.count += action.payload },
  },
})
 
// 컴포넌트
const count = useAppSelector((state) => state.counter.count) // number로 추론
const dispatch = useAppDispatch()
dispatch(counterSlice.actions.increaseBy(5))                // 인자 타입 검사