React 이벤트 핸들링

오래 집중하기 힘드네요 ㅋㅋ ...

 

0 . 이벤트 핸들링 기초

 <button onClick={핸들러_함수}>클릭</button>

- 이벤트 이름은 camelCase로 작성(onClick, onChange 등)

- 문자열이 아니라 함수를 전달해야 함

 

1 . 버튼 클릭 이벤트

function ClickExample() {
  const handleClick = () => { // void
    alert("버튼이 클릭되었습니다!");
  };

  return <button onClick={handleClick}>클릭!</button>;
}

- handleClick 함수가 버튼 클릭 이벤트에 연결되어 있다

- 버튼을 클릭하면 "버튼이 클릭되었다"는 알림이 뜬다

 

2. 인자 전달이 필요한 경우

그런데 handleClick 함수가 단순한 함수가 아니라 매개변수가 필요하면 어떻게 해야 할까? 예를 들어, 우리가 handleClick 함수에서 특정 값을 받아서 처리하고 싶을 때, 이렇게 작성할 수 있다:

function handleClick(value) { alert(`값: ${value}`); }

이 함수는 매개변수 value를 받아서 알림을 띄워주는 함수야. 그런데 이 함수가 이벤트 핸들러로 사용될 때는, 이벤트 객체도 자동으로 전달된다.

 

예를 들어, 버튼 클릭 시 onClick은 자동으로 이벤트 객체를 인자로 전달하는데, 이렇게 하면 handleClick 함수가 두 개의 인자를 받게 된다:

<button onClick={handleClick}>클릭</button>

• handleClick 함수는 이벤트 객체를 첫 번째 인자로 받게 된다 .
• handleClick(event)와 같은 형태가 됨.

그렇다면 value라는 추가적인 인자를 넘기려면 어떻게 해야 할까?

 

 

 

3. 화살표 함수로 인자 전달하기

이때, 화살표 함수를 사용해서 인자를 명시적으로 전달할 수 있다. 이렇게:

<button onClick={() => handleClick(42)}>값 전달하기</button>

 

왜 화살표 함수를 쓰는지?

• onClick={handleClick} 이런 형태로 직접 넘기면 handleClick 함수는 자동으로 이벤트 객체를 받기 때문에, 추가적인 value를 전달할 수 없어서
• 그래서 화살표 함수 () => handleClick(42)를 사용해, handleClick 함수에 직접 42라는 값을 전달한다.

이렇게 되면:

• () => handleClick(42)가 먼저 실행되고,
• 그 안에서 handleClick(42)가 호출되며 42라는 값이 함수에 전달된다.

 

4. 입력 값 변화 감지 (onChange)

import { useState } from "react";

function InputExample() {
  const [text, setText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>입력된 값: {text}</p>
    </div>
  );
}

• 사용자가 입력한 값이 text 상태에 실시간으로 반영된다.
• 입력 값이 화면에 바로 업데이트 되는 걸 확인할 수 있다.

 

5. 이벤트 핸들러에 조건 추가

function ConditionalExample() {
  const handleClick = (event) => {
    if (event.shiftKey) {
      alert("Shift 키와 함께 클릭했어요!");
    } else {
      alert("그냥 클릭했어요!");
    }
  };

  return <button onClick={handleClick}>조건부 이벤트</button>;
}

• event.shiftkey로 shift 키가 눌렸는지 확인해서 다른 메세지를 출력한다.

6. 이벤트 타입 총정리

onClick	클릭이벤트
onChange	입력 값 변경 이벤트
onSubmit	폼 제출 이벤트
onKeyDown	키보드 입력 이벤트