React) Handle To Input

import React, { Component } from "react";

class HandleToInput extends Component {
    state = {
        username: '',
        message: ''
    };

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    handleClick = () => {
        alert(`${this.state.username}: ${this.state.message}`);
        this.setState({
            username: '',
            message: ''
        });
    }

    render() {
        return (
            <div>
                <h1>Event Practice</h1>
                <input
                    type="text"
                    name="username"
                    placeholder="사용자 이름"
                    value={this.state.username}
                    onChange={this.handleChange}
                />
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하세요"
                    value={this.state.message}
                    onChange={this.handleChange}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default HandleToInput;

### Component Structure

1. **State Initialization**:
   ```jsx
   state = {
       username: '',
       message: ''
   };
   ```
   - The component’s state initializes with two properties: `username` and `message`, both set to empty strings. These state properties correspond to the values entered in the two input fields.

2. **Event Handlers**:
   - **handleChange Method**:
     ```jsx
     handleChange = (e) => {
         this.setState({
             [e.target.name]: e.target.value
         });
     }
     ```
     - This method handles changes in both input fields. It uses the input field’s `name` attribute (`username` or `message`) to determine which part of the state to update, making the handler flexible and reusable for multiple fields.
     - It employs computed property names (`[e.target.name]`) to dynamically update the correct state property based on the name of the input field being changed.

   - **handleClick Method**:
     ```jsx
     handleClick = () => {
         alert(`${this.state.username}: ${this.state.message}`);
         this.setState({
             username: '',
             message: ''
         });
     }
     ```
     - Triggered when the button is clicked, this method displays an alert with the current values of `username` and `message`, formatted as a string.
     - After displaying the alert, it resets both `username` and `message` in the state to empty strings, clearing the input fields for new entries.

3. **Rendering the Component**:
   ```jsx
   render() {
       return (
           <div>
               <h1>Event Practice</h1>
               <input
                   type="text"
                   name="username"
                   placeholder="사용자 이름"
                   value={this.state.username}
                   onChange={this.handleChange}
               />
               <input
                   type="text"
                   name="message"
                   placeholder="아무거나 입력하세요"
                   value={this.state.message}
                   onChange={this.handleChange}
               />
               <button onClick={this.handleClick}>확인</button>
           </div>
       );
   }
   ```
   - The `render` method outputs JSX to display the component.
   - It includes a heading and two inputs, each configured with a `type`, `name`, `placeholder`, and `value`. The `value` is linked to the respective state properties, making the inputs controlled components.
   - Both inputs use the same `onChange` handler, demonstrating the flexibility of handling multiple inputs with a single method.
   - A button is included to trigger the `handleClick` method, which processes and clears the input data.

### Summary

This component is a practical example of handling form elements in React using class components. It showcases important concepts like state management, controlled components, event handling, and dynamic state updates based on input names. This approach is particularly useful for forms with multiple fields, as it reduces redundancy and keeps the component clean and manageable.