Event Handling

• HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다.
• JSX 에 이벤트를 설정할 수 있습니다.

class Comp extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => {
          console.log('clicked');
        }}>클릭</button>
      </div>
    );
  }
}

onClick 부분은 props로 들어가게 됩니다.
props로 들어간 이벤트는 이벤트 리스너로 등록하게 됩니다.

개요

• camelCase 로만 사용할 수 있습니다.
  - onClick, onMouseEnter
• 이벤트에 연결된 자바스크립트 코드는 함수입니다.
  - 이벤트={함수} 와 같이 씁니다.
• 실제 DOM 요소들에만 사용 가능합니다.
  - 리액트 컴포넌트에 사용하면, 그냥 props 로 전달합니다.
  

function 컴포넌트

예시

function Component() {
  return (
    <div>
      <button
        onClick={() => {
          console.log("clicked");
        }}
        >
        클릭
      </button>
    </div>
  );
}
ReactDOM.render(<Component />, rootElement);

1. camelCase와 접두사로 on 을 사용하여 이벤트를 기재합니다.
2. JSX문법안에 js로직을 넣기 위해 {} 를 사용합니다.
3. {} 안에 이벤트에 등록할 로직을 넣습니다.

class 컴포넌트

class Component extends React.Component {
  render() {
    return (
      <div>
        <button
          onClick={() => {
            console.log("clicked");
          }}
          >
          클릭
        </button>
      </div>
    );
  }
}

function 컴포넌트와 같은방법으로 기재합니다.

class컴포넌트에서 이벤트를 이용하여 state 변경

예시

class Component extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button
          onClick={() => {
            console.log("clicked");
            this.setState((state) => ({
              ...state,
              count: state.count + 1
            }));
          }}
          >
          클릭
        </button>
      </div>
    );
  }
}

이벤트를 인라인으로 작성하지 않고 별도의 메소드로 분리하기

class Component extends React.Component {
  state = {
    count: 0
  };
  constructor(props) { 
    super(props);

    this.click = this.click.bind(this);
  } // click 함수 안의 this가 클래스를 가리키도록 this를 바인딩 해주기 위해
	// consrtuctor 를 만들어 클래스 생성시 this 바인딩 작업을 여기서 하게 함.

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭</button>
      </div>
    );
  }

  click() { // 별도의 함수로 분리
    console.log("clicked");
    this.setState((state) => ({
      ...state,
      count: state.count + 1
    }));
  }
}

이벤트를 인라인으로 작성하지 않고 별도의 메소드(화살표 함수)로 분리하기

화살표 함수로 만들게 되면 this 바인딩 작업을 하지 않아도 됩니다.

class Component extends React.Component {
  state = {
    count: 0
  };
//  constructor(props) { 
//    super(props);

//    this.click = this.click.bind(this);
//  } // 화살표 함수로 만들면 this 바인딩 작업을 하지 않아도 됩니다.

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭</button>
      </div>
    );
  }

  click = () => { // 별도의 함수로 분리
    console.log("clicked");
    this.setState((state) => ({
      ...state,
      count: state.count + 1
    }));
  }
}

함수 컴포넌트에서 이벤트를 이용하여 state 변경은 다음에 다룹니다.