React 이벤트 처리하기

• button click 이벤트 예시 

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

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

• Inline 작성 방식(일반적으로 간단한 함수를 작성할 때 유용하다

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

• 화살표 함수 사용

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

 

주의점: 

JSX 내부에 작성되는 함수는 반드시 호출이 아닌, 함수의 reference를 전달해야 한다. 

• 첫 번째는 react에게 button이 click될 때만 함수가 호출되도록 기억하게 한다. 
• 두 번째 예시는 ()는 함수를 호출하기 때문에 rendering되는 과정에서 click이 발생하지 않았음에도 불구하고 함수 호출이 발생한다. 
  • JSX { }에서 작성되는 JS는 즉각 실행됨을 기억해라

 

 

• inline의 경우도 동일하게 좌측에 있는 것은 익명 함수를 전달했기 때문에 클릭 이벤트시에만 호출되지만, 우측의 경우 렌더링 과정에서 호출된다. 

• 핵심: React에서 이벤트 헨들러를 다룰 때는 함수 자체를 넘겨줘라!

---

이벤트 헨들러를 props로 전달하기

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

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}

function UploadButton() {
  return (
    <Button onClick={() => alert('Uploading!')}>
      Upload Image
    </Button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}

• 위 코드를 보면 알 수 있듯이 Button component의 경우 inline 형식으로 헨들러를 작성 후 PlayButton component으로 부터 props를 받아와 값을 할당함을 확인할 수 있다. 부모 컴포넌트에서 자식 컴포넌트의 이벤트 헨들러를 작성할 수 있음을 의미! Button 컴포넌트는 전달 받은 props(여기에서는 이벤트 헨들러)에 따라서, 각각 다른 이벤트를 실행할 수 있음을 의미한다.

---

Event propagation

• 본 글은 React 이벤트 처리에 대해서 개괄하고자 작성된 것으로 event bubble과 관련된 내용은 다른 글에서 정리하고자 한다. (추가로 학습하고 싶다면 출처에 있는 공식문서 참고)

단 React에서 events propagate는 (onScroll을 제외하곤) JSX tag가 함께 있는 경우에만 발생함을 주의해라!

 

 

---

Event handler의 side effect

• 렌더링 함수와 달리, 이벤트 헨들러의 경우 순수 함수일 필요는 없다. 따라서, 수많은 데이터의 변환이 발생한다 ( input의 value 변경, button 클릭에 따른 list 변경 등). 하지만, 정보를 변경하기 전에 사전에 저장하는 것이 중요하다. 이럴 경우 react에선 state 란 강력한 Hooks를 제공한다. 

 

 

출처

https://beta.reactjs.org/learn/responding-to-events

Responding to Events