Event Handling

• React에서의 Event 사용 시에는 { } 안에 함수 이름을 넣어서 가져온다.
  • 실행 시키지 않는다! 함수 자체를 전달해준다.
• 이벤트는 소문자가 아닌 camelCase를 사용한다.
• 기본적으로 있는 DOM요소에만 이벤트 설정이 가능하다

//HTML 에서의 이벤트
<button onclick = "activeEvent()"> 클릭 </button>

//React 에서의 이벤트
<button onClick = {activeEvent}> 클릭 </button>

React 합성 이벤트

• 브라우저 별 호환성과 사용자의 편의성을 위해 합성 이벤트를 사용한다.
  • 브라우저마다 이벤트 종류나 이름, 처리되는 방식이 모두 다르기 때문.
  • 기존 Event를 감싼 SyntheticEvent로 사용되며 일관적으로 이벤트를 처리할 수 있도록 도와준다.

▶️ 함수형 컴포넌트 이벤트

import { useState } from "react";

function EventFunc() {
  const [msg, setMsg] = useState("hello");

 const handleOnClick = () => {
    setMsg("bye");
  };

 function handleOnClickHello() {
    setMsg("hello");
  }

const handleOnClickTest = (message) => {
    setMsg(message);
  };

 return (
    <>
      <div>
        {/* {msg}에는 useState에 담않은 초기값 hello가 출력 */}
        {msg}
        <button onClick={handleOnClick}>잘가</button>
        <button onClick={handleOnClickHello}>안녕</button>

        {/* 함수에서 매개변수를 받고 싶으면 어떻게 해야하나 */}
        {/* 첫번째 방법. onClick에서 익명함수를 선언하고, 그 내부에서 함수를 실행시킨다. */}
        {/* <button
          onClick={() => {
            handleOnClickTest("안녕?");
          }}
        >
          테스트
        </button> */}

        {/* 두번째 방법. bind를 이용한다. */}
        {/* bind의 첫번째 인자(매개변수)는 .앞에있는 함수(handleOnClickTest)의 this를 결정한다. */}
        {/* 첫번째는 이미 기능이 정해져있다. 할 일이 있으니 넘겨줄값이 없다. 그래서 null로 둔다. */}
        {/* 두번째 인자로 원하는 값을 넘겨주면 된다. */}
        <button onClick={handleOnClickTest.bind(null, "안녕?")}>테스트</button>
      </div>
    </>
  );
}

export default EventFunc;

▶️ 클래스형 컴포넌트 이벤트

• this를 사용해야 함수를 찾아 갈 수 있다. 바인딩 해주는 작업 필요!
• 잘 사용하지 않기 때문에 알고만 있자.

  import { Component } from "react";
  
  //클래스형 컴포넌트 이벤트에서는 this를 사용해야 함수를 찾아 갈 수 있다.
  // 이 때 1)함수 선언문을 사용하거나 2)함수 표현식을 사용할 수 있다.
  // 단 함수 선언문 사용 시에는 생성자 내부에서 this를 바인딩해줘야 한다.
  class EventClass extends Component {
    constructor(props) {
      super(props);
      this.state = {
        msg: "hello",
      };
  
      //---1) 함수선언문에서의 this 바인딩 작업
      //메소드 내부에서 class의 this를 사용하고 싶을 경우 bind를 해줘야한다. 생성자 내에서 this 객체를  직접 bind 해주는 작업을 거쳐야한다.
      //그래야 handleOnClick 내부에서 클래스를 가리키고 있는 this를 사용할 수 있다. 해당 this를 사용하라고 알려주는 것.
      this.handleOnClick = this.handleOnClick.bind(this);
    }
  
    //---1) 함수선언문 (동적 바인딩)
    //함수가 사용될 때 this를 결정짓는다.
    handleOnClick() {
      this.setState({ msg: "bye" });
    }
  
    //---2) 함수 표현식 (정적 바인딩)
    //함수가 선언될 때 this를 결정짓는다. 함수를 선언하는 코드를 읽을 때 this가 결정되는 것.
    handleOnClickHello = () => {
      this.setState({ msg: "hello" });
    };
  
    render() {
      return (
        <>
          {this.state.msg}
          <button onClick={this.handleOnClick}>잘가</button>
          <button onClick={this.handleOnClickHello}>안녕</button>
  
          {/* event는 리액트의 합성 이벤트 객체이다. 합성이벤트에 대한 모든 정보를 담고있다.
          그 중에 target이라는 거에 접근을 하면, 이벤트가 걸린 태그를 확인할 수 있음.
          이벤트의 type도 확인 가능 */}
          <button
            onClick={(event) => {
              console.log(event.target);
              console.log(event.type);
            }}
          >test</button>
        </>
      );
    }
  }
  
  export default EventClass;