React) state in input value

import { Component } from 'react';

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

    render(){
        return(
            <div>
                <h1> Event Practice </h1>
                <input
                    type = "text"
                    name = "message"
                    placeholder="아무거나 입력하시오"
                    value = {this.state.message}
                    onChange={
                        (e) => {
                            this.setState({
                                message : e.target.value
                            })
                        }
                    }/>
            </div>
        );
    }
}

export default EventPractice;

### Component Details

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

2. **Rendering the Component**:
   ```jsx
   render() {
       return (
           <div>
               <h1> Event Practice </h1>
               <input
                   type="text"
                   name="message"
                   placeholder="아무거나 입력하시오"
                   value={this.state.message}
                   onChange={
                       (e) => {
                           this.setState({
                               message: e.target.value
                           })
                       }
                   }/>
           </div>
       );
   }
   ```
   - Within the `render` method, the component returns a `div` containing an `h1` element for the title and an `input` element for text input.
   - The `input` element is a controlled component, as its `value` is directly linked to the `message` state. This setup means that the input's value always reflects the `message` state, and any change to the input updates the state accordingly.

3. **Handling Input Changes**:
   ```jsx
   onChange={
       (e) => {
           this.setState({
               message: e.target.value
           })
       }
   }
   ```
   - The `onChange` event handler is an inline function that updates the `message` state whenever the user types into the input field.
   - When the user types, `e.target.value` captures the current value of the input, and `this.setState` updates the `message` state to reflect this value.

### Key Functionalities and React Concepts Demonstrated

- **Controlled Component**: The input field is a controlled component because its value is bound to the React state. Any changes to the input directly modify the state, and the state in turn controls the input's value.
- **Event Handling in React**: This component demonstrates how to handle events in React by using an inline arrow function within the JSX to handle the `onChange` event, which is a common pattern in React for handling form elements.
- **State Management**: It uses React's state management capabilities to keep track of the user's input, showcasing how state can be updated in response to user actions.

### Possible Enhancements

While the current implementation works well for demonstrating basic controlled components and event handling, here are a few enhancements that could be considered:

1. **Refactoring Event Handlers**: For cleaner code and possibly improved performance on larger components, you can refactor the inline function into a class method:
   ```jsx
   handleChange = (e) => {
       this.setState({ message: e.target.value });
   }

   render() {
       return (
           <div>
               <h1> Event Practice </h1>
               <input
                   type="text"
                   name="message"
                   placeholder="아무거나 입력하시오"
                   value={this.state.message}
                   onChange={this.handleChange}
               />
           </div>
       );
   }
   ```
   This change separates the event handling logic from the JSX, making the component easier to read and manage.

2. **Adding More Interactivity**: You might consider adding a button that, when clicked, could display the message in another element of the DOM or clear the message, which would introduce interaction patterns like clearing forms or displaying data elsewhere in your application.

This component provides a solid foundation for understanding controlled components and handling text inputs in React, making it a valuable example for learning these key React concepts.