[리액트] 이벤트 제어하기

리액트의 이벤트

• React의 이벤트는 소문자 대신 캐멀케이스(camelCase)를 사용한다.

이벤트 핸들러를 인라인으로 정의하려면 다음과 같이 익명 함수로 작성하면 된다.

<button onClick={() => alert('You clicked me!')}>

컴포넌트에서 이벤트 처리

이벤트 핸들러 정의하기

리액트에서 이벤트를 처리하려면 이벤트 핸들러 함수를 작성하고, 해당 함수를 특정 이벤트 핸들러 속성(예: onClick, onSubmit)에 전달할 수 있다.

function handleInputChange(e) {
  console.log(e.target.value);
}

이벤트 전달하기

• JSX를 사용하여 이벤트에 전달되는 함수는 호출되는 것이 아니라 전달되어야 한다.

함수 전달(올바른)	함수 호출(잘못됨)
<button onClick={handleClick}>	<button onClick={handleClick()}>

함수 전달(올바른 방식)에서는 handleClick 함수가 이벤트 핸들러로 onClick에 전달된다. 이는 React에게 해당 함수를 기억하고, 사용자가 버튼을 클릭했을 때만 호출하도록 지시한다. 링크

다른예시:

• 이벤트를 원하는 요소에 연결.

<input type="text" onChange={handleInputChange} />

이제 사용자가 input에 입력을 하면, handleInputChange 함수가 호출된다.

기본 동작 방지

일부 브라우저 이벤트에는 기본 동작들이 있다. 예를 들어 <form>제출 이벤트는 버튼을 클릭할 때 발생하며 기본 동작으로 전체 페이지를 다시 로드한다.

e.preventDefault()이벤트 개체를 호출하여 브라우저 기본동작을 발생하지 않도록 할 수 있다.

function Signup() {

	function handleSubmit(e){
   e.preventDefault();
      alert('Submitting!');
}

  return (
    <form onSubmit={handleSubmit}>
      <input />
      <button>Send</button>
    </form>
  );
}

이벤트 전파

이벤트 전파는 자바스크립트 포스트에 다뤘기 때문에 상세하게 다루지 않을꺼다. 링크

리액트 공식문서를 보면 이벤트가 부모 요소에 전파하는 것을 방지하려면, 전파 중지를 e.stopPropagation(); 을 해당 이벤트 핸들러에 작성하면 된다.

리액트에서 이벤트 핸들링은 웹 앱의 사용자 인터랙션을 다루는 중요한 부분이다. 이 포스트에서는 리액트에서 이벤트 핸들러를 정의하고 사용하는 방법, 이벤트 객체의 사용, 기본 동작 방지 및 이벤트 전파와 같은 주제를 다뤘다. 이러한 기초를 통해 사용자와의 상호작용을 원활하게 만들 수 있으며, 더욱 풍부하고 반응적인 경험을 제공할 수 있다.

리액트 공식 문서