React / 기초4 / 이벤트 처리하기

이전글

React / 기초3 / LifeCycle

 

 

---

 

 

1. React에서 Event 처리 시 유의할 점

 

React에서의 Event 처리 방식은 DOM에서와 매우 유사하지만, 몇가지 차이점이 존재한다.

 

 

1. onclick 속성에 JSX 문법으로 중괄호 {}를 쓰고, 안에 함수명을 적는다.

>> 함수 실행문이 아닌 함수명만 적는다. 이것은 React가 JSX를 Javascript로 렌더링할때 함수를 자동으로 실행하기 때문이다.

// HTML 방식
<button onclick="activateLasers()">
  Activate Lasers
</button>
 
// React 방식
<button onClick={activateLasers}>
  Activate Lasers
</button>

2. 기본 동작 방지를 위해 false 반환이 아닌 preventDefault()를 사용해야 한다.

 

HTML에서의 링크를 여는 기본동작은 아래와 같은 코드로 작성될 수 있다.

 

<a href="http://www.naver.com" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

 

여기서 return false 부분을 지우면 'Click me' 라는 text를 클릭 했을 때 새 페이지가 열리게 되면서 해당 주소로 이동하게 된다. 이것이 링크에 대한 기본동작인데, return false 부분이 이것을 억제하는 것이다.

 

React 에서는 아래와 같은 코드로 작성한다.

 

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
 
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

 

어찌됐건, 이 파라미터를 이용해서 event를 제어한다.

3번 줄에서 e.preventDefault(); 를 통해 마치 HTML 코드에서의 return false와 같은 효과를 내고 잇는 것을 볼 수 있다.

 

마찬가지로, 이 합성이벤트 'e'를 이용해서 DOM 구조에 addEventListener를 달아준 것처럼, "e.target.value" 같은 코드를 작성하여 이벤트 객체의 value 값을 이용할 수 있게 된다.

 

 

---

 

 

2. Event 만들어 보기!

 

이벤트에 대한 이해를 위해서 사용자가 'ON'과 'OFF' 상태로 상태를 변환(Toggle)할 수 있는 버튼을 렌더링 해본다.

 

 

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn : true};
 
    //binding 해주어야 this가 작동함!
    this.handleClick = this.handleClick.bind(this);
}
 
  handleClick() {
    this.setState(state => ({
      isToggleOn : !state.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick = {this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    );
  }
}
 
ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);
 

 

1. 각 메서드의 this를 바인딩하기

class 정의 시에 공부한 것과 같이, javascript의 this는 기본적으로 class 자체에 바인딩 되어있지 않다. 따로 바인딩 해주지 않는다면 함수 호출 시 this는 undefined 또는 window가 되게 된다. 따라서 반드시 메서드마다 this를 bind 해주도록 한다.

 

만약 위 예제와 다르게 handleClick 뿐 아니라 다른 메서드가 있다면, 각각의 메서드에 대해서 모두 this를 bind 해주어야 한다. 다른 실험적인 방법으로는 '클래스 필드 문법 사용', '화살표 함수 사용' 의 방법이 있다.

 

 

2. 이벤트 핸들러에 인자 전달하기

 

보통 이벤트 핸들러를 설정하면, 합성이벤트 파라미터인 'e' 외에도 추가적인 매개변수를 전달하는 것이 일반적이다. 그럴 경우는 아래의 예시와 같이 코드를 작성하면 된다.

 

<button onClick = { (e) => this.deleteRow(id, e)}> Delete Row </button>

 

정확하게는 알 수 없지만.. 아마 어떤 Data의 행의 번호를 id라는 매개변수로 나타내고, 원하는 행을 지우기 위해서 해당 매개변수를 사용하는 예시인 것 같다.

 

>> React 이벤트를 나타내는 'e' 인자는 추가 매개변수 'id' 뒤에 위치해 있음을 기억하자!