React) onChange Event

import { Component} from "react";

class EventPractice extends Component {
    render() {
        return (
            <div>
                <h1> Event practice</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하시오."
                    onChange={
                        (e) => {
                            console.log(e);
                        }
                    }
                />
            </div>
        );
    };
}

export default EventPractice;

### Component Overview

1. **Component Declaration**:
   ```jsx
   import { Component } from "react";

   class EventPractice extends Component {
   ```
   - The component extends `Component`, which means it inherits methods and properties from React's `Component` class.

2. **Rendering the Component**:
   ```jsx
   render() {
       return (
           <div>
               <h1> Event practice</h1>
               <input
                   type="text"
                   name="message"
                   placeholder="아무거나 입력하시오."
                   onChange={
                       (e) => {
                           console.log(e);
                       }
                   }
               />
           </div>
       );
   };
   ```
   - The `render` method defines what the component renders to the DOM.
   - Inside the `render` method, a `div` contains:
     - An `h1` tag with the text "Event practice", serving as the title.
     - An `input` field of type "text" with a placeholder saying "아무거나 입력하시오." (which translates to "Enter anything.").
   - The `input` field is set up with an `onChange` event handler. This handler is an inline arrow function that takes the event object (`e`) as a parameter and logs it to the console.

### Key Functional Details

- **Event Handling**: 
  - The event handler attached to the `input` field's `onChange` event captures and logs the entire event object to the console. This can be useful for debugging or understanding the structure of event objects in React.
  - The event object contains properties such as `target` (which represents the DOM element the event was fired from), `type` (the type of the event), and many other properties that describe the context and behavior of the event.

- **Input Field**: 
  - The `input` field is uncontrolled in this setup, meaning it does not tie its value to any state or props within the component. While the user can type into the field, the component does not explicitly manage or store the input's value. For a complete form management, you might consider making it a controlled component by adding a state that keeps track of the input's value and setting the `input`'s `value` property to this state.

### Suggested Enhancements

If the purpose of this component is to practice event handling in React and potentially build a more interactive or stateful component, you could consider adding the following enhancements:

1. **State Management**:
   - Introduce a state property to store the value of the input. Update this state in the `onChange` handler.
   ```jsx
   state = { message: '' };

   handleChange = (e) => {
       this.setState({ message: e.target.value });
       console.log(this.state.message);
   }
   ```

2. **Logging Input Value Instead**:
   - Modify the event handler to log the input's current value instead of the entire event object. This is more practical for most real-world applications where you're interested in the data rather than the event metadata.
   ```jsx
   onChange={(e) => {
       console.log(e.target.value);
   }}
   ```

This approach would help in creating a more functional example that could be extended into a form that submits data or interacts more deeply with user inputs.