React) Event Practice 1

import {Component} from "react";

class Event_Practice extends Component{
    state = {
        message : ''
    }

    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e){
        this.setState({
            message : e.target.value
        });
    }

    handleClick(){
        alert(this.state.message);
        this.setState({
            message: ''
        });
    }

    render(){
        return(
            <div>
                <h1>event practice</h1>
                <input
                    type = "text"
                    name = "message"
                    placeholder = "아무거나 입력"
                    value = {this.state.message}
                    onChange = {this.handleChange}/>
                <button onClick = {this.handleClick}>확인</button>
            </div>
        );
    }
}

export default Event_Practice;

### Component Structure

1. **Import and Component Declaration**:
   ```jsx
   import { Component } from "react";
   
   class Event_Practice extends Component {
   ```
   - You import the `Component` class from the React library, which is necessary to create class components.
   - `Event_Practice` extends `Component`, inheriting its functionality.

2. **State Initialization**:
   ```jsx
   state = {
       message: ''
   }
   ```
   - The component's state is initialized in the class field syntax with a single property: `message`. This property will hold the value entered in the input field.

3. **Constructor and Method Binding**:
   ```jsx
   constructor(props) {
       super(props);
       this.handleChange = this.handleChange.bind(this);
       this.handleClick = this.handleClick.bind(this);
   }
   ```
   - The constructor is used to bind the `this` context to the `handleChange` and `handleClick` methods. This binding is necessary to ensure that when these methods are called as event handlers, they have the correct `this` context to access the component's state and methods.

4. **Event Handler for Input Change**:
   ```jsx
   handleChange(e) {
       this.setState({
           message: e.target.value
       });
   }
   ```
   - This method is triggered every time the user types into the input field.
   - It updates the `message` state with the current value of the input field, ensuring the input is a controlled component.

5. **Event Handler for Button Click**:
   ```jsx
   handleClick() {
       alert(this.state.message);
       this.setState({
           message: ''
       });
   }
   ```
   - This method is called when the user clicks the button.
   - It first displays an alert with the current message stored in the state.
   - Then, it clears the message in the state, resetting the input field.

6. **Rendering the Component**:
   ```jsx
   render() {
       return(
           <div>
               <h1>event practice</h1>
               <input
                   type="text"
                   name="message"
                   placeholder="아무거나 입력"
                   value={this.state.message}
                   onChange={this.handleChange}/>
               <button onClick={this.handleClick}>확인</button>
           </div>
       );
   }
   ```
   - The `render` method outputs the JSX for the component.
   - It includes an `<h1>` tag for a title, an input field configured as a controlled component (with the `value` linked to the `message` state and `onChange` to handle changes), and a button to submit the form.

7. **Exporting the Component**:
   ```jsx
   export default Event_Practice;
   ```
   - This line makes the `Event_Practice` component available for import and use in other parts of your application.

### Summary

Your component effectively demonstrates how to manage simple form data in React using class components. It showcases key concepts like state management, controlled components, and handling events. This is a typical pattern for handling forms in React where data flow is managed explicitly and components are interactive and responsive to user inputs.