[리액트 5] 기본개념 - 이벤트, 폼 처리

// 리액트에서 이벤트처리 및 폼 처리 등을 예시와 함께 설명해 주시겠어요?

 

네, React에서 이벤트 처리와 폼 처리를 다루는 방법에 대해 알아봅시다.

1. 이벤트 처리

React의 이벤트 처리는 DOM 요소의 이벤트 처리와 매우 유사합니다. 하지만 주의해야 할 점은 몇 가지 있습니다.

• React 이벤트 핸들러는 캐멀 케이스(camelCase)로 명명됩니다. 예를 들어, 클릭 이벤트 핸들러는 JavaScript에서 'onclick'이지만, React에서는 'onClick'입니다.
  
  
• React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다.

예시를 살펴보겠습니다:

class MyButton extends React.Component {
  handleClick = event => {
    event.preventDefault();
    console.log('Button clicked');
  }

  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}

위의 코드에서 handleClick 메서드는 이벤트 객체를 파라미터로 받고, 이 객체를 사용해 preventDefault를 호출합니다.

2. 폼 처리

React에서 HTML 폼 요소는 약간 다른 동작을 보입니다.
일반적으로 사용자가 폼을 제출하면 새로운 페이지로 이동하는데, 이는 원치 않는 동작일 수 있습니다.
따라서 폼 제출을 처리할 때 event.preventDefault()를 호출하곤 합니다.

React에서 폼 요소의 값은 일반적으로 컴포넌트의 state를 사용해 관리합니다. 이를 "Controlled Component"라고 합니다.

예시를 살펴보겠습니다:

class MyForm extends React.Component {
  state = {
    value: ''
  }

  handleChange = event => {
    this.setState({value: event.target.value});
  }

  handleSubmit = event => {
    alert('Form submitted with value: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

위의 코드에서 handleChange 메서드는 사용자가 입력한 값을 state에 저장하고, handleSubmit 메서드는 폼 제출을 처리합니다.
이 메서드는 event.preventDefault()를 호출해 페이지 이동을 방지합니다.
이처럼 폼 상태를 React 컴포넌트의 state를 사용해 관리하는 방식은 state와 UI가 일관성을 유지하도록 돕습니다.