React 이벤트

React 이벤트 사용하기

---

Javascript에서의 이벤트를 React에서도 사용할 수 있다.

1단계:

<div id="root"></div>

#root {
  padding: 10px;
}

class CounterText extends React.Component {
  render() {
    let textStyle = {
      paddingBottom: 20,
      fontSize: 36,
      color: "#333"
    };

    return <div style={textStyle}>{this.props.countPros}</div>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  countPlus() {
    this.setState({
      count: this.state.count + 1
    });
  }

  countMinus() {
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    let backgroundStyle = {
      display: "inline-block",
      padding: 20,
      textAlign: "center",
      backgroundColor: "#f4f4f4",
      borderRadius: 10
    };
    let buttonStyle = {
      margin: 2,
      width: 40,
      height: 30,
      textAlign: "center",
      fontSize: 14,
      fontWeight: "bold",
      color: "#666"
    };

    return (
      <div style={backgroundStyle}>
        <CounterText countPros={this.state.count} />
        <button onClick={this.countPlus} style={buttonStyle}>
          +
        </button>
        <button onClick={this.countMinus} style={buttonStyle}>
          -
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

countPlus(){
  this.setState({
    count: this.state.count + 1
  });
}

countMinus(){
  this.setState({
    count: this.state.count - 1
  });
}

countPlus(), countMinus() 함수에서의 this는 컴포넌트를 참조할 수 없다. 따라서 버튼을 클릭해도 숫자가 증가되거나 감소되지 않는다ㅠ

2단계:

그래서 어떻게 고치냐??!!! 화살표 함수를 사용하면 된다!

class CounterText extends React.Component {
  render() {
    let textStyle = {
      paddingBottom: 20,
      fontSize: 36,
      color: "#333"
    };

    return <div style={textStyle}>{this.props.countPros}</div>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  countPlus = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  countMinus = () => {
    this.setState({
      count: this.state.count - 1
    });
  };

  render() {
    let backgroundStyle = {
      display: "inline-block",
      padding: 20,
      textAlign: "center",
      backgroundColor: "#f4f4f4",
      borderRadius: 10
    };
    let buttonStyle = {
      margin: 2,
      width: 40,
      height: 30,
      textAlign: "center",
      fontSize: 14,
      fontWeight: "bold",
      color: "#666"
    };

    return (
      <div style={backgroundStyle}>
        <CounterText countPros={this.state.count} />
        <button onClick={this.countPlus} style={buttonStyle}>
          +
        </button>
        <button onClick={this.countMinus} style={buttonStyle}>
          -
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

또 다른 해결 방안은 이벤트 호출 부에서 bind를 추가하는것!

return (
  <div style={backgroundStyle}>
    <CounterText countPros={this.state.count} />
    <button onClick={this.countPlus.bind(this)} style={buttonStyle}>
      +
    </button>
    <button onClick={this.countPlus.bind(this)} style={buttonStyle}>
      -
    </button>
  </div>
);