JS/onClick 이벤트(React)

마우스 이벤트를 활용하는 거에 대해 미숙했다.
초반에 배우다가 삽질을 특히나 많이해서, 까다롭다고 느꼈다.
하지만 리액트를 배우면서, 얼마나 쉽게 사용할 수 있는지 깨달았다.

import React from "react";

export default class parents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "날 바꿔줘!"
    };
    this.handleChangeValue = this.handleChangeValue.bind(this); // 바인딩은 공식처럼 진행
    this.handleChangeValue1 = this.handleChangeValue1.bind(this);
  }

  handleChangeValue() {
    this.setState({
      value: "보여줄게 완전히 달라진 값"
    });
  }
  
  handleChangeValue1() {
    this.setState({
      value: "새로운 버튼"
    });
  }

  render() {
    return ( // 클릭하면 작동했으면 좋겠다 싶은 태그에 onClick={관련함수} 만 써주면 다 작동했다.
      <div>
        <div onClick={this.handleChangeValue1}>값은 {this.state.value} 입니다</div>
        <ChildComponent handleButtonClick={this.handleChangeValue} />
      </div>
    );
  }
}

function ChildComponent(props) {
  return <button onClick={props.handleButtonClick}>값 변경</button>;
}

이 코드를 실제로 구현한 화면의 모습이다.

1. 값 변경 버튼을 누르면 아래처럼 바뀌고

2. 값은 보여줄게 완전히 달라진 값 입니다 텍스트를 누르면 아래처럼 변한다.

onClick를 정복했다 !