[React] React.js 튜토리얼 3- 이벤트 처리하기

 

 

이미지출처: https://velog.io/@hyejeong/%EC%99%9C-React%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

 

 

 

 

이전 포스팅을 보려면 아래 링크를 눌러주세요.

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

 

 

 

React에서의 이벤트 함수명은 카멜케이스(camelCase)를 사용하여 만들어줍니다.

<button onClick={activateLasers}>
  Activate Lasers
</button>

 

 

토글버튼을 하나 만들어봅니다.

onClick에는 클릭한 버튼의 handleClick이 실행되도록 설정해놓았고,

handleClick은 isToggleOn state변수가 true면 false로, false면 true로 바뀌도록 해놓았습니다.

버튼의 텍스트는 isToggleOn의 상태에 따라 변경됩니다.

 

class Toggle extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isToggleOn: true  // 토글 상태(on,off)를 체크할 state 변수
    };

    // 콜백에서 '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>
    )
  }
}

 

 

 

버튼을 클릭해보면 아래와 같이 ON, OFF 텍스트가 변경 되는 것을 확인할 수 있습니다.

 

 

콜백에서 'this'가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);

바인딩하지않고 onClick에 전달하였다면 this는 undefined가 되면서 에러가 뜨게 됩니다.

 

 

 

 

콜백에 화살표함수를 사용하면 바인딩을 사용하지 않아도 this를 사용할 수 있게 됩니다.

 

 

class Toggle extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isToggleOn: true
    };
  }

  handleClick(){
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render(){
    return (
      <button onClick={() => this.handleClick()}>  // 화살표함수 사용
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    )
  }
}

 

 

 

 

 

또한, 아래처럼 HTML에서는 form에서 return false를 반환하면 기본동작을 방지하게 되는데,

React에서는 false를 반환하더라도 기본 동작을 방지할 수 없고,

반드시 preventDefault를 명시적으로 호출해야 합니다. 

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

 

 

React에서의 기본동작 방지 코드입니다.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

 

 

 

 

 

아래는 참고 React 페이지 URL 이고,

다음편에서는 조건부렌더링에 대해서 알아보겠습니다.

https://ko.legacy.reactjs.org/docs/handling-events.html 

이벤트 처리하기 – React

 

 

 

 

 

다음 글을 보시려면 아래 링크를 눌러주세요.

[React] React.js 튜토리얼 4- 조건부 렌더링

[React] React.js 튜토리얼 4- 조건부 렌더링