React Academy · 강의

TypeScript에서 이벤트와 참조 형식 지정하기

DOM 상호작용에 React.ChangeEvent, React.MouseEvent, RefObject 제네릭을 사용합니다.

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

React 합성 이벤트

React는 네이티브 DOM 이벤트를 SyntheticEvent로 감쌉니다. 각 이벤트 타입에는 특정 제네릭이 있습니다. 예를 들어 React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> 등이 있습니다.

onChange 타입 지정

가장 일반적인 이벤트는 입력 요소의 onChange입니다. 해당 처리기의 타입은 React.ChangeEvent<HTMLInputElement>로 지정하십시오.

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

onClick 타입 지정

버튼 클릭에는 React.MouseEvent<HTMLButtonElement>를 사용합니다. 전체 타입 정보가 지정된 상태에서 e.currentTarget, e.preventDefault(), e.stopPropagation()에 접근할 수 있습니다.

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

onSubmit 타입 지정

양식 제출에는 React.FormEvent<HTMLFormElement>를 사용합니다. 기본 브라우저 페이지 이동을 막으려면 항상 e.preventDefault()를 호출하십시오.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

키보드 이벤트 타입 지정

키보드 처리기의 타입을 지정하려면 React.KeyboardEvent<HTMLElement>를 사용하십시오. e.key, e.code, e.ctrlKey에 안전하게 접근할 수 있습니다.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

DOM 요소에 useRef 사용하기

HTML 요소 타입을 useRef의 제네릭으로 전달하고 null로 초기화하십시오. 그러면 TypeScript가 참조에 해당 요소 타입이 저장된다는 것을 알 수 있습니다.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

변경 가능한 참조와 DOM 참조

DOM 노드가 아닌 변경 가능한 값을 저장할 때는 null 대신 값으로 useRef를 초기화하십시오. TypeScript가 변경 가능한 MutableRefObject를 추론합니다.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

useImperativeHandle 타입 지정

자식 컴포넌트에서 참조 API를 노출할 때 핸들에 대한 인터페이스를 정의하고 forwardRef와 useImperativeHandle 양쪽에서 사용하십시오.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

참조 콜백

참조 콜백은 DOM 요소 또는 null을 받습니다. (node: HTMLElement | null) => void로 타입을 지정하십시오.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

이벤트 대상과 현재 대상

e.target은 이벤트를 발생시킨 요소이고, e.currentTarget은 처리기가 연결된 요소입니다. 특정 속성이 필요할 때는 e.target의 타입을 변환하십시오.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

제네릭 이벤트 처리기 타입

재사용 가능한 이벤트 처리기 함수를 작성하려면 제네릭 React.EventHandler<Event>를 사용하거나 전체 함수 시그니처를 인라인으로 작성하십시오.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

빠른 확인

HTMLInputElement를 저장하는 useRef에는 어떤 TypeScript 타입을 사용해야 하나요?

요약

React.ChangeEvent, React.MouseEvent, React.FormEvent 제네릭으로 이벤트 처리기의 타입을 지정하십시오. useRef<HTMLElement>(null)로 DOM 참조의 타입을 지정하고, 변경 가능한 참조에는 값의 타입을 사용하십시오. 명령형 API에는 명시적인 핸들 인터페이스와 함께 forwardRef를 사용하십시오.

자주 묻는 질문

“TypeScript에서 이벤트와 참조 형식 지정하기” 강의는 무료인가요?

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

“TypeScript에서 이벤트와 참조 형식 지정하기”에서 뭘 배우나요?

DOM 상호작용에 React.ChangeEvent, React.MouseEvent, RefObject 제네릭을 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“TypeScript에서 이벤트와 참조 형식 지정하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← React Academy(으)로 돌아가기