React) Property initializer Syntax

import {Component} from 'react';

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

    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 Property_Initializer_Syntax;

### Component Details

1. **State Initialization**:
   ```jsx
   state = {
       message: ''
   }
   ```
   - The state is initialized directly within the class, outside of any constructor method. This is possible thanks to the class field declaration syntax, which simplifies the code and eliminates the need for a constructor just to define state.

2. **Class Field Methods**:
   - **handleChange**:
     ```jsx
     handleChange = (e) => {
         this.setState({
             message: e.target.value
         });
     }
     ```
     - This method updates the state's `message` field whenever the input field's content changes. The arrow function syntax ensures that `this` within the function refers to the component instance, bypassing common issues with `this` binding.
   - **handleClick**:
     ```jsx
     handleClick = () => {
         alert(this.state.message);
         this.setState({
             message: ""
         });
     }
     ```
     - This method handles the button click event. It displays the current `message` state in an alert and then clears the `message` state, effectively resetting the input field for new input.

3. **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 necessary to display the component:
     - An `<h1>` tag provides a title for the component.
     - An `<input>` field of type "text" is controlled by the component's state. Its value is linked to the `message` state, and it updates this state on changes.
     - A `<button>` triggers the `handleClick` method when clicked, which is used to submit the input's data.

### Summary

This component effectively demonstrates several key concepts in React:
- **Controlled Components**: The text input is a controlled component, meaning its value is directly controlled by the React state.
- **Event Handling**: Both the input change and button click events are managed within the component, showing how to handle user interactions in React.
- **State Management**: The use of state to hold and manage data within a component is showcased, along with the pattern of updating state based on user input and then resetting it.

This pattern is foundational for understanding how to build interactive forms in React, making this component an excellent example for learning basic React functionalities. Additionally, the use of property initializers for defining methods and state in class components is a modern and clean approach that avoids some common pitfalls of JavaScript `this` context management.