프론트엔드 기초집LESSON 15

Props, State, 이벤트 타입 지정

난이도초급

예상 시간35분

선수지식이전 강의

15강. Props, State, 이벤트 타입 지정

1. 이번 강의에서 해결할 문제

React 코드에서 props가 빠지거나 이벤트 대상이 잘못되어도 의도를 명확히 적지 않으면 오류를 늦게 발견합니다. 자주 쓰는 React 타입을 대시보드 필터에 적용합니다.

2. 학습 목표

props의 필수·선택 속성과 콜백 타입을 선언한다.
useState의 추론과 제네릭 표기를 구분한다.
input, select, form 이벤트 타입을 지정한다.

3. 핵심 개념

Vite의 react-ts 템플릿에는 React 타입 정의가 준비됩니다. JSX가 있는 파일은 .tsx를 사용합니다. 단순한 state는 초깃값으로 추론하고, null에서 객체로 바뀌거나 유니온 상태라면 제네릭을 명시합니다.

이벤트 핸들러를 JSX 안에 바로 쓰면 타입이 문맥에서 추론됩니다. 별도 함수로 분리할 때는 ChangeEvent, FormEvent 같은 타입을 import type으로 가져옵니다.

4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/components/FilterBar.tsx

import { type ChangeEvent } from 'react';
import type { Platform } from '../types/game';

type FilterBarProps = {
  query: string;
  platform: Platform | 'all';
  resultCount?: number;
  onQueryChange: (query: string) => void;
  onPlatformChange: (platform: Platform | 'all') => void;
};

export function FilterBar({
  query,
  platform,
  resultCount = 0,
  onQueryChange,
  onPlatformChange,
}: FilterBarProps) {
  function handleQueryChange(event: ChangeEvent<HTMLInputElement>) {
    onQueryChange(event.target.value);
  }

  function handlePlatformChange(event: ChangeEvent<HTMLSelectElement>) {
    onPlatformChange(event.target.value as Platform | 'all');
  }

  return (
    <section>
      <input value={query} onChange={handleQueryChange} />
      <select value={platform} onChange={handlePlatformChange}>
        <option value="all">전체</option>
        <option value="PC">PC</option>
        <option value="Console">Console</option>
        <option value="Mobile">Mobile</option>
      </select>
      <p>{resultCount}개 결과</p>
    </section>
  );
}

5. 코드가 동작하는 이유

FilterBarProps가 부모와 자식 사이의 계약이 됩니다. 콜백은 DOM 이벤트를 부모에게 노출하지 않고 필요한 값만 전달합니다. input과 select의 이벤트 타입이 다르므로 target의 사용 가능한 속성도 정확히 검사됩니다.

6. 자주 하는 실수와 해결법

모든 이벤트를 Event나 any로 지정: 구체적인 React 이벤트와 요소 타입을 사용합니다.
선택 prop을 검사 없이 사용: 기본값을 주거나 undefined를 처리합니다.
useState(null)만 작성: 이후 Game 객체를 넣을 예정이면 useState<Game | null>(null)로 씁니다.
콜백 반환 타입을 복잡하게 만듦: UI 이벤트 콜백은 보통 값을 받아 void를 반환합니다.

7. 직접 실습

GameCard에 onFavorite(id: string): void 콜백과 선택 rank?: number prop을 추가하세요. rank가 있을 때만 순위를 표시하고 부모에서 클릭한 id를 확인하세요.

8. 이해 점검 질문 3개

useState에 제네릭 타입을 명시해야 하는 대표 상황은 무엇인가요?
input과 select 이벤트 타입을 구분하는 이유는 무엇인가요?
자식이 이벤트 객체 대신 query 문자열만 부모에 전달하면 어떤 이점이 있나요?

9. 핵심 요약

React 타입은 컴포넌트 입력, 상태 변화, 사용자 이벤트의 계약을 드러냅니다. 문맥 추론을 활용하면서 경계에는 구체적인 타입을 지정합니다.

MINI QUIZ