[React] 이벤트 처리하기_1

 

 

Event Handler in React

리액트는 jsx에 이벤트 핸들러를 등록할 수 있게 해 준다. 이벤트 핸들러는 클릭이나 마우스오버, 값 입력 등에 대해 반응할 수 있게 만드는 함수이다. 

//button 태그에 alert 이벤트를 등록해주는 함수 handleClick

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

일반적으로 컴포넌트 내부에서 정의해서 사용하며 이름을 handle로 시작하는 단어로 정하는 것이 컨벤션에 더 적합하다. 

 

아래와 같이 jsx 내부에서 인라인 방식으로 이벤트 핸들러를 정의할 수도 있다.

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

//화살표 함수 사용
<button onClick={() => {
  alert('You clicked me!');
}}>

 

 

주의점

jsx 코드 내에서 함수는 호출이 아니라 '전달'되어야 한다.

//✅Do
<button onClick={handleClick}>
<button onClick={() => alert('...')}>	

//📌Don't
<button onClick={handleClick()}>
<button onClick={alert('...')}>

Don't 방식으로 이벤트 핸들러를 작성하면 이벤트가 발생했을 때 이벤트 핸들러 함수가 실행되는 것이 아니라 렌더링 될 때마다 함수가 실행된다.

 

또한 이벤트 핸들러 함수는 컴포넌트 내부에서 선언되기 때문에 컴포넌트의 prop에 접근할 수 있다. 같은 함수로 서로 다른 버튼에서 활용할 수 있기 때문에 재사용성이 높다.

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!"> //클릭하면 "Playing!" 경고창 뜸
        Play Movie  
      </AlertButton>
      <AlertButton message="Uploading!"> //클릭하면 "Uploading!" 경고창 뜸
        Upload Image
      </AlertButton>
    </div>
  );
}

 

 

Event Handler Naming

<button>이나 <div> 같은 태그들은 onClick과 같은 내장 이벤트만 지원하지만 컴포넌트를 만들 때 자신이 원하는 이름으로 이벤트 이름을 정할 수 있다. 아래의 예시에서는 onClick 이벤트를 onSmash로 명명했다.

function Button({ onSmash, children }) {
  return (
    <button onClick={onSmash}>
      {children}
    </button>
  );
}

export default function App() {
  return (
    <div>
      <Button onSmash={() => alert('Playing!')}> //클릭하면 "Playing!" 경고창 뜸
        Play Movie
      </Button>
      <Button onSmash={() => alert('Uploading!')}> //클릭하면 "Uploading!" 경고창 뜸
        Upload Image
      </Button>
    </div>
  );
}