React) Event Practice 2

import {Component} from "react";

class EventPractice 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 EventPractice;

### Component Overview

1. **State Initialization**:
   ```jsx
   state = {
       message: ''
   }
   ```
   - The component's state initializes with a single property: `message`, set to an empty string. This state variable will store the current value of the input field.

2. **Constructor and Method Binding**:
   ```jsx
   constructor(props) {
       super(props);
       this.handleChange = this.handleChange.bind(this);
       this.handleClick = this.handleClick.bind(this);
   }
   ```
   - The constructor calls `super(props)` to inherit the base Component class's functionality.
   - It binds the `this` context to the `handleChange` and `handleClick` methods. This binding ensures that these methods have access to the correct context (i.e., the component instance) when they are triggered, allowing them to interact with the component's state and props.

3. **Handling Input Change**:
   ```jsx
   handleChange(e) {
       this.setState({
           message: e.target.value
       });
   }
   ```
   - This method updates the state's `message` property whenever the input field's value changes (triggered by the `onChange` event).
   - It sets the `message` state to the current value of the input field (`e.target.value`), making the input a controlled component.

4. **Handling Button Click**:
   ```jsx
   handleClick() {
       alert(this.state.message);
       this.setState({
           message: ''
       });
   }
   ```
   - This method is triggered by the button's `onClick` event.
   - It first displays the current message from the state in an alert box.
   - Then, it clears the `message` state, resetting the input field.

5. **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 returns the JSX to be displayed. It includes:
     - An `h1` element for the title.
     - An `input` field bound to the `message` state. As the value of the input changes, the `handleChange` method keeps the state updated.
     - A `button` that triggers the `handleClick` method when clicked, processing the user's input.

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

### Summary

This component is a good example of basic interactive functionality in React, demonstrating state management, controlled components (input fields), and handling user events effectively. It showcases fundamental React concepts that are essential for building more complex applications. The code is well-organized and clear, making it suitable for educational purposes or as a starting point for similar features in larger applications.