[React] Event Handling

Html DOM을 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나야 한다.

 

- camelCase로만 사용할 수 있다. ex) onClick, onMouseEnter

- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. ex) 이벤트 = {함수}

- 실제 DOM 요소들에만 사용 가능하다. 리액트 컴포넌트에 사용하면 props로 전달한다.

이벤트 처리하기 – React

 

버튼 클릭했을 때 이벤트가 적용되는 대표적인 예시!

 

🔍 이벤트 핸들링을 활용하여 간단한 검색창을 만들어볼 것이다.

1. 아무것도 입력하지 않았을 땐 p태그 없음 (state typing속성)

2. 타이핑 중에는 Looking for .... (input태그 handleChange)

3. Search 클릭했을 땐 We find result of ... (button태그 handleClick)

 

input값이 변경됐을 때 setState로 keyword에 값을 변경하고자 한다.

그러나, 전역 상태로 값을 준 것이지 엘리먼트는 불변객체라 한번 그려지면 새로 그려지는 것이 아니다.

그래서 화면에는 state.keyword 값이 출력되지 않는다. 

 

그러므로 render를 함수로 빼준다.

 

여기서 Object assign이란?

이전 객체를 새로운 객체로 다른 부분이 있다면 덮어 씌우는 것이다.

Object.assign() - JavaScript | MDN

 

handleClick 함수도 만들고 typing 속성도 추가하여 최종 코드 완성! (hook 사용 전)

 

useState라는 hook사용으로 render함수를 따로 빼줄 필요가 없어졌다. 또한, setState라는 함수를 따로 만들어 줄 필요가 없어졌다. 매우 간편해짐!! (hook 사용 후)

 

📌 함수를 별도의 메서드로 분리

this에 바인딩해주는 방식

1. 메서드가 JSX를 통해 각 DOM에 이벤트로 등록되는 과정에서, 컴포넌트 인스턴스의 관계가 끊기게 된다.

그렇기 때문에 클릭 시 this는 undefined가 될 것이며 onClick 이벤트 핸들러 내에서도 this를 인식할 수 없다.

그래서 아래처럼 처음 constructor() 메서드에서 이벤트 핸들러에 현재 컴포넌트인 this를 바인딩해준다.

  class Component extends React.Component {
    state = {
      count: 0,
    };
    constructor(props) {
      super(props);
      this.click = this.click.bind(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 }));
    }
  }
  ReactDOM.render(<Component />, document.querySelector("#root"));

 

2. 이벤트 핸들러를 화살표 함수 형태로 정의한다.

ES6의 화살표 함수 문법이 this bind를 지원하기 때문에 별도의 바인딩이 필요 없다.

  class Component extends React.Component {
    state = {
      count: 0,
    };
    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 }));
    };
  }
  ReactDOM.render(<Component />, document.querySelector("#root"));

 

📌 이벤트 기본 동작 방지

DOM의 경우에는 이벤트 핸들러가 false를 반환하면 기본 동작이 발생하지 않으나 React는 무조건적으로 발생한다.

이를 방지하기 위해 React에서는 preventDefault()라는 메서드를 활용할 수 있다.

const handleClick = (e) => {
  e.preventDefault();
};

<a href="#" onClick={handleClick}>
  Click Me!
</a>;

 

 

이벤트 처리하기 – React