[React] 이벤트 처리하기

🌟 이벤트 처리

🔖 이벤트 처리 문법

• React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

<button onClick={activateLasers}>
  Activate Lasers
</button>

• React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다.
• preventDefault를 명시적으로 호출해야 합니다.
• React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener
  를 호출할 필요가 없습니다.
• 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다.

function Form() {
  function handleSubmit(e) {
    **e.preventDefault();**
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

 

🔖 팝업창 닫기

onClikck 이벤트 달아주기

visible이 true 인 경우 삼항 연산자로 스타일 보여주기

visibel이 false 인 경우 setVisible이 false이므로 꺼짐

import React, { useState } from "react";

const Banner = () => {
    const [visible, setVisible] = useState(true)

    const getCoupon = () => {
        alert("10% 할인 쿠폰을 받으셨습니다.")
    }

    const closeBanner = (e) => {
        e.stopPropagation()         //이벤트 버블링 막기
        setVisible(false)
    }

    return (visible ?
        <div
            style={{
                backgroundColor: "orange",
                fontWeight: "bold",
                height: "50px",
                display: "flex",
                justifyContent: "space-around",
                alignItems: "center",
            }}
            onClick={getCoupon}
        >
            이 곳을 클릭해서 쿠폰을 받아가세요.
            <button onClick={closeBanner}>닫기</button>
        </div>
        : null)
};

export default Banner;

 

🔖 .stopPropagation()

• 이벤트 버블링 막기
• 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지
• 전파를 방지해도 이벤트의 기본 동작은 실행되므로, stopPropagation()이 링크나 버튼의 클릭을 막는 것은 아님
• 이런 기본 동작을 방지하려면 preventDefault()메서드를 사용

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation

Event.stopPropagation() - Web API | MDN

 

🌟 클래스 컴포넌트 이벤트 처리

🔖 this.이벤트.bind(this)

JSX 콜백 안에서 this의 의미에 대해 주의해야 합니다.

JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않습니다.

this.handleClick을 바인딩하지 않고 onClick에 전달하였다면,

함수가 실제 호출될 때 this는 undefined가 됩니다.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    **this.handleClick = this.handleClick.bind(this);**
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);