DOM의 Event

<button onClick = 'activate()'>
  Activate
</button>  

DOM에서는 클릭 이벤트를 처리할 함수를 onclick를 통해서 전달한다.(소문자)

<button onClick = {activate}>Activate</button>

• C가 대문자로 이루어져있음

• DOM에서는 이벤트를 처리할 함수를 문자열로 전달하지만, 리액트에선 함수로 전달한다. (표기법과 함수전달 방식이 다르다)

Envent Handler

• 이벤트 리스너라고도 부른다.

import React from "react";

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

  handleClick() {
    this.setState((prevState) => ({
      isToggleOn: !prevState.isToggleOn,
    }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? "켜짐" : "꺼짐"}
      </button>
    );
  }
}
// 
export default Toggle;

• 핸들클릭 함수를 정의하는 부분은 일반적인 함수를 정의하는 것과 동일하게 괄호와 중괄호를 사용해서 함수를 정의한다.

• 이렇게 정의된 함수를 constructor에서 바인드를 이용하여 this.handleClick에 대입한다.

  • 바인드를 하는 이유는 ?

    • 자바스크립트에서는 기본적으로 클래스 함수들이 바운드 되지 않는다.
    • 바인드를 하지 않으면 this.handleClick은 글로벌스코프에서 호출된다.
    • 콜백에서 'this'를 사용하려면, 바인딩을 필수적으로 해야된다.

바인드를 사용하지 않으려면?

import React from "react";

class MyButton extends React.Component {
  handleClick() {
    console.log("this is : ", this);
  }

  render() {
    return <button onClick={() => this.handleClick()}>클릭!!!!!!</button>;
  }
}

export default MyButton;

앞에 있는 클래스컴포넌트를 함수컴포넌트로 바꾸면?

import React, { useState } from "react";

function Toggle(props) {
  const [isToggleOn, setIsToggleOn] = useState(0);

  //방법1: 함수안에 함수로 정의한다.
  function handleClick() {
    setIsToggleOn((isToggleOn) => !isToggleOn);
  }
  //방법2:arrow함수를 이용한다.
  const handleClick = () => {
    setIsToggleOn((isToggleOn) => !isToggleOn);
  };

  return (
    <button onClick = {handleClick}> {isToggleOn ? "켜짐" : "꺼짐"}</button>
  );
}
export default Toggle;

매개변수 넘겨줄 때,

---

실습

클래스컴포넌트

import React from "react";

class Confirmbutton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isConfirmed: false,
    };
    this.handleConfirm = this.handleConfirm.bind(this);
    //바인드를 통해서 handleConfirm을 묶어줬다.
  }

  handleConfirm() {
    this.setState((prevState) => ({
      isConfirmed: !prevState.isConfirmed,
    }));
  }

  render() {
    return (
      <button onClick={this.handleConfirm} disabled={this.state.isConfirmed}>
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}
export default Confirmbutton;
// 클릭 시
// onClick , disabled 둘 다 실행된다. handleConfirm 호출함
// handleConfirm()+ setState 실행 : 매개변수로 넘겨받은 prevState 상태값변경
/*     this.state = {
      isConfirmed: false,
    }; 그리고 이 부분 실행함
    
    */

• isConfirmed 변수를 하나 가지고 있으며 초기값이 false이다.

함수형으로 변경해보기

import React, { useState } from "react";

function Confirmbutton(props) {
  const [isConfirmed, setIsConfirmed] = useState(false);

  const handlerConfirm = () => {
    setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
  };

  return (
    <button onClick={handlerConfirm} disabled={isConfirmed}>
      {isConfirmed ? "확인됨" : "확인하기"}
    </button>
  );
}
export default Confirmbutton;

/* 호출순서정리
1. 클릭 시 -> handlerConfirm && disabled 실행 
2. handlerConfirm (setIsConfirmed 실행) => [] 상태값 변경


*/