React | 이벤트에 응답하기 (Responding to Events)

React를 사용하면 JSX에 이벤트 핸들러를 추가할 수 있습니다.
이벤트 핸들러는 클릭, 호버링, 양식 입력에 초점 맞추기 등과 같은 사용자 액션에 대한 반응으로 트리거되는 고유한 기능입니다.

이벤트 핸들러 추가하기 (Adding event handlers)

이벤트 핸들러를 추가하기 위해서는 먼저 함수를 정의한 다음 JSX태그에 Prop로 전달합니다.

버튼을 만듭니다.
Button 컴포넌트 안에 handleClick 함수를 선언합니다.
handleClick 함수에는 alert로 메시지를 보여줍니다.
button에 onClick={handleClick}을 추가합니다.
handleClick함수는 button에 prop로 전달됩니다.

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

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

이벤트 핸들러 함수는

components 안에 정의됩니다.
handle로 시작되고,뒤에 이벤트 이름을 붙입니다. ex) onClick={handleClick}, onMouseEnter={handleMouseEnter}

tip) 이벤트 핸들러는 호출되는게 아니고 전달되어야 합니다.

passing a function (correct) :

<button onClick={() => alert('...')}>

React가 onClick에 전달되는 handleClick을 기억하고 버튼을 클릭할 떄만 함수를 호출하도록 합니다.

calling a function (incorrect) :

<button onClick={alert('...')}>

handleClick()의 ()는 렌더링 중에 즉시 함수를 실행하게 합니다.
JSX의 {} 안에서는 JavaScript가 바로 실행되기 때문입니다.

<button onClick={alert('...')}>
위의 onClick은 클릭시가 아니라 렌더링될 때마다 실행됩니다.

Reading props in event handlers

이벤트 핸들러는 컴포넌트 내부에서 선언되기 때문에 컴포넌트의 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>
  );
}

Passing event handlers as props

부모 컴포넌트가 자식의 이벤트 핸들러를 지정해야합니다.
이렇게 구현하기 위해서 구성 요소가 부모로부터 받는 prop을 이벤트 처리기로 전달합니다.

Toolbar 컴포넌트는 PlayButton와 UploadButton를 렌더링한다.
PlayButton은 내부에 있는 Button에 onClick 소품으로 handlePlayClick을 전달합니다.
UploadButton은 () => 경고('업로드 중!')를 내부 버튼에 대한 onClick 소품으로 전달합니다.

Button 구성 요소는 onClick이라는 prop를 허용합니다.
onClick = {onClick}을 사용하여 prop 를

에 직접 전달합니다.
이것은 클릭 시 전달된 함수를 호출하도록 React에 지시합니다.

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

Naming event handler props

button 및 div와 같은 컴포넌트는 onClick과 같은 지정한 이벤트 이름만 지원합니다.
그러나 고유한 컴포넌트를 구축할 때 prop의 이름을 지정할 수 있습니다.

tip) 우리는 이벤트 핸들러는 on으로 시작하고 그 뒤에는 대문자로 시작하는 걸로 약속합니다.

   <Button onSmash={() => alert('Playing!')}>
        Play Movie
   </Button>

Event propagation

이벤트 핸들러는 컴포넌트가 가질 수 있는 모든 자식의 이벤트도 포착합니다.
이벤트가 트리 위로 "bubbles"되거나 "propagates"된다고 말합니다.
이벤트가 발생한 위치에서 시작하여 트리 위로 올라갑니다.

이 component에서 button으로 클릭하면 버튼의 onClick이 실행됩니다.
그리고 해당 이벤트는 propagates가 되어 className이 Toolbar인 div에 onClick 도 실행됩니다.

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

onScroll만 해당 현상이 일어나지 않습니다.

Stopping propagation

이벤트 핸들러는 이벤트 객체를 유일한 인수로 받습니다.
일반적으로 "이벤트"를 의미하는 e라고 합니다.
이 개체를 사용하여 이벤트에 대한 정보를 읽을 수 있습니다.
해당 이벤트 개체를 사용하여 전파를 중지할 수 있습니다.
이벤트가 부모 컴포넌트에 도달하는 것을 막으려면 e.stopPropagation()을 호출해야 합니다.

Passing handlers as alternative to propagation

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

e.stopPropagation()은 위의 태그에 연결된 이벤트 핸들러가 실행되는 것을 중지합니다.
e.preventDefault()는 이를 포함하는 몇 가지 이벤트에 대한 기본 브라우저 동작을 방지합니다.

Side effect

렌더링 함수와 달리 이벤트 핸들러는 순수할 필요가 없습니다.
입력에 대한 응답으로 입력 값을 변경하거나 버튼 누름에 대한 응답으로 목록을 변경하는 것과 같이 무언가를 변경하기에 좋은 곳입니다.
이 때 먼저 정보를 저장할 수 있는 컴포넌트의 메모리인 state를 사용합니다.

Adding Interactivity

A JavaScript library for building user interfaces

beta.reactjs.org

Let's develop level up