상호작용 추가 - 이벤트 응답

이벤트에 응답

React를 사용하면 JSX에 이벤트 핸들러를 추가할 수 있다. 이벤트 핸들러는 클릭, 가리키기, 양식 입력에 초점 맞추기 등과 같은 사용자 상호 작용에 대한 응답으로 트리거 되는 자체 기능이다.

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

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

이벤트 핸들러에 전달되는 함수는 호출되는 것이 아니라 전달되어야 한다.
호출하는 경우 함수가 렌더링 될 때마다 실행되는 문제가 생긴다.

이벤트 핸들러에서 props 읽기

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

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">
        Play Movie
      </AlertButton>
      <AlertButton message="Uploading!">
        Upload Image
      </AlertButton>
    </div>
  );
}

이벤트 핸들러를 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>
  );
}

이벤트 전파

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>
  );
}

두 버튼 중 하나를 클릭하면 해당 버튼이 onClick 함수가 먼저 실행된 다음 상위 버튼이 실행된다.
연결된 JSX 태그에서만 작동하는 onScroll 이벤트를 제외하고 모든 이벤트는 React에서 전파된다.

전파 중지

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

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <Button onClick={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onClick={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}

stopPropagation()을 사용하여 이벤트 전파를 중지할 수 있다

이벤트 핸들러에 부작용이 있을 수 있을까?

렌더링 함수와 달리 이벤트 핸들러는 순수할 필요가 없으므로 예를 들어 입력에 대한 응답으로 입력 값을 변경하거나 버튼 누름에 대한 응답으로 목록을 변경하는 등 무언가를 변경하기에 좋은 곳이다. 그러나 일부 정보를 변경하려면 먼저 정보를 저장할 방법이 필요하다. React에서는 component의 메모리인 state를 사용하여 이 작업을 수행한다.