React) onKeyPress Event handling

import { Component } from 'react';

class onKeyPress_Event_handling 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 : ''
        });
    }

    handleKeyPress = (e) => {
        if (e.key === 'Enter'){
            this.handleClick();
        }
    }

    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}
                    onKeyPress = {this.handleKeyPress}
                />
                <button onClick = {this.handleClick}>확인</button>
            </div>
        );
    }
}

export default onKeyPress_Event_handling;

### Component Breakdown

1. **State Initialization**:
   ```jsx
   state = {
       username: '',
       message: ''
   }
   ```
   - Initializes the state with two fields: `username` and `message`. These are intended to store the values entered in the respective input fields.

2. **Event Handlers**:
   - **handleChange**:
     ```jsx
     handleChange = (e) => {
         this.setState({
             [e.target.name]: e.target.value
         });
     }
     ```
     - This method updates the state based on input changes. It dynamically handles multiple input fields by using the input's `name` attribute as a key to update the correct state property. 
     - Note: In your original implementation, you enclosed `e.target.value` within an array (`[e.target.value]`). This would store the value as an array in the state, which is likely not intended. The correction above ensures that the state stores these as strings.

   - **handleClick**:
     ```jsx
     handleClick = () => {
         alert(this.state.username + ': ' + this.state.message);
         this.setState({
             username: '',
             message: ''
         });
     }
     ```
     - Displays the current values of `username` and `message` in an alert and then resets both to empty strings. This is typically used to clear the form after submission.

   - **handleKeyPress**:
     ```jsx
     handleKeyPress = (e) => {
         if (e.key === 'Enter') {
             this.handleClick();
         }
     }
     ```
     - This method checks if the key pressed is the "Enter" key and, if so, triggers the `handleClick` method. This allows users to submit the form by pressing Enter when focused on the `message` input field.

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}
                   onKeyPress={this.handleKeyPress}
               />
               <button onClick={this.handleClick}>확인</button>
           </div>
       );
   }
   ```
   - The `render` method includes two input fields and one button:
     - Each input field is controlled by the component's state, ensuring the displayed value always matches the state.
     - The first input collects the username, and the second collects a message. Both fields trigger the same `handleChange` on text changes.
     - The message input also listens for key presses to handle submissions via the Enter key.
     - The button triggers the `handleClick` function, which can be used to submit the data.

### Summary

This component effectively demonstrates handling forms with React, including dynamically setting state based on input names, handling multiple event types, and controlling input fields. These are foundational concepts in React, making this component a good learning tool for understanding how to build interactive forms in React applications. It also highlights a common pattern of form submission using both a clickable button and the Enter key, enhancing user experience by providing multiple ways to trigger form actions.