[소플의 처음 만난 리액트] 8장 실습문제

ConfirmButton.jsx

import React from "react";
// 클릭 이벤트 처리하기

class ConfirmButton extends React.Component {
  constructor(props) {
    super(props); //  부모 생성자 호출
    this.state = {
      isConfirmed: false,
    };  //  state 선언

    // bind 사용하기
    // this.handleConfirm = this.handleConfirm.bind(this);
  }

  // 클래스 필드 문법 사용하기(변수로 만들어서 함수를 담게)
  handleConfirm = () => {
    this.setState((prevState)=>({
      isConfirmed: !prevState.isConfirmed,
    }));
  }

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

  render() {
    return (
      <button
        onClick={this.handleConfirm}
        disabled={this.state.isConfirmed}
      >
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}

export default ConfirmButton;

핵심 키워드

• React에서 이벤트를 다루는 방법으로는 핸들링 함수를 선언하는 방법, 익명함수로 처리하는 방법이 있다.

• React에서 이벤트 이름은 onClick과 같이 소문자가 아닌 camelCase를 사용해 작성한다.

• 이벤트 핸들러는 jsx 표기를 따라 {}를 이용해 연결한다.

• DOM 요소에만 이벤트 설정이 가능하다.

• React에서 this를 바인딩하는 방법으로는 생성자 안에서 바인딩, 클래스 필드 문법으로 바인딩, 화살표 함수로 바인딩 하는 방법이 있다.

결론!