[React] 컴포넌트 이벤트

윤지·2024년 11월 28일

목록 보기

9/15

클릭 이벤트 (Click Event)

리액트 이벤트는 카멜 케이스로 작성하며, 함수 참조 방식(onClick={handler})으로 사용함

// ❌ 잘못된 사용 예
<button onclick="clickHandler">Click me</button>
<button onclick="{clickHandler()}">Click me</button>
// ✅ 올바른 사용 예
<button onClick={clickHandler}>Click me</button>

기본 클릭 이벤트 코드

export default function App() {
//✅ 리액트는 일반적으로 화살표 함수 사용(선언문도 가능하나 화살표 함수가 일반적)
  const clickHandler = () => {
    alert("Click!");
  };

  return (
    <>
      <h1>App</h1>
      <button onClick={clickHandler}>Click me</button>
    </>
  );
}

⚠️ 함수 호출 방식으로 전달({clickHandler()})시 컴포넌트가 렌더링될 때마다 함수가 실행됨
⇒ 이를 피하기 위해 함수 참조로 전달할 것

이벤트 객체의 BaseEvent

이벤트 객체는 이벤트 발생 시 클릭 위치, 입력 키, 마우스 좌표 등의 정보를 포함함

이벤트 핸들러는 매개변수('e' 또는 'event')를 통해 이 정보에 접근 가능

// ❌ 매개변수 없이 사용하면 BaseEvent 정보를 활용할 수 없음
const handleClick = () => {
  // 이벤트 객체의 정보에 접근 불가
};

// ✅ 매개변수로 이벤트 객체를 받아 BaseEvent 정보 활용 가능
const handleClick = (event: React.MouseEvent) => {
  console.log(event.nativeEvent); // 원본 DOM 이벤트
  console.log(event.isPropagationStopped()); // 이벤트 전파 중단 여부
  console.log(event.type); // 이벤트 타입
};

체인지 이벤트 (Change Event)

입력 값이 변경될 때 발생하는 이벤트. e.target.value를 통해 현재 입력된 값을 가져올 수 있음

자동 타입 추론

타입스크립트 사용 시 인라인 화살표 함수를 사용하면 이벤트 객체의 타입을 자동으로 추론함

// ✅ 인라인 화살표 함수로 작성하면 자동 타입 추론
<input type="text" onChange={(e) => {
  console.log(e.target.value); // e의 타입이 자동으로 추론됨
}} />

이렇게 인라인 화살표 함수를 사용하면 TypeScript가 이벤트 객체의 타입을 자동으로 추론해주며, 이 추론된 타입을 함수에 활용 가능

체인지 이벤트 핸들러 예제

changeHandler 함수는 input 요소의 값이 변경될 때마다 호출됨

const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};

return <input type="text" onChange={changeHandler} />;

키보드 이벤트 (Keyboard Event)

키보드 입력과 관련된 이벤트로, 키가 눌릴 때 onKeyDown 핸들러를 사용함

const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
  console.log(e.key); // 눌린 키 이름
  console.log(e.keyCode); // 키 코드
};

return <input type="text" onKeyDown={keyDownHandler} />;

폼 이벤트 (Form Event)

리액트의 SPA(Single Page Application)에서는 폼 제출 시 새로고침이 불필요함

폼의 제출 이벤트(onSubmit)에서 페이지 새로고침을 막아 SPA 동작을 유지해야 함

const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault(); // 기본 동작 방지
     //적절한 로직 처리
};

return (
  <form onSubmit={submitHandler}>
    <input type="text" name="id" />
    <button type="submit">Submit</button>
  </form>
);

이벤트 핸들러와 매개변수

이벤트 핸들러에 매개변수를 전달할 때는 화살표 함수로 감싸서 전달해야 함

매개변수가 필요 없는 경우

// 매개변수가 필요없을 때는 함수 참조만 전달
<button onClick={handleClick}>Click</button>

// 또는 매개변수 없는 화살표 함수로도 가능
<button onClick={() => handleClick()}>Click</button>

매개변수가 필요한 경우

// 매개변수가 필요할 때는 화살표 함수로 래핑
<button onClick={() => handleClick(param)}>Click</button>

이벤트 객체와 매개변수 모두 필요한 경우

// 이벤트 객체(e)를 명시적으로 전달하고 싶을 때
<button onClick={(e) => handleClick(e)}>Click</button>

// 이벤트 객체와 다른 매개변수를 함께 전달할 때
<button onClick={(e) => handleClick(e, param)}>Click</button>