React 기본 문법-이벤트 처리

다음으로 React 기본 문법 중 "이벤트 처리"에 대해 알아보겠습니다.

1. React 기본 문법
   • 이벤트 처리

React에서는 이벤트를 처리하는 방식이 HTML과 유사하지만 몇 가지 차이점이 있습니다.

• React의 이벤트는 소문자 대신 camelCase를 사용합니다.
• JSX에서는 문자열 대신 이벤트 핸들러로 함수를 전달합니다.
• React에서 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다.

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

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

위의 예제에서 handleClick 메서드가 버튼 클릭 시 호출되며, 클릭마다 컴포넌트의 상태가 토글됩니다.

함수형 컴포넌트와 Hook을 사용하면 다음과 같이 작성할 수 있습니다.

import React, { useState } from 'react';

function Toggle() {
  const [isToggleOn, setToggle] = useState(true);

  function handleClick() {
     setToggle(!isToggleOn);
   }

   return (
     <button onClick={handleClick}>
       {isToggleOn ? 'ON' : 'OFF'}
     </button>
   );
}

ReactDOM.render(
   <Toggle />,
   document.getElementById('root')
);

다음 주제로 넘어가도록 하겠습니다.