React) function style of Component

import React, { useState } from 'react';

const FunctionStyleComponent = () => {
    const [username, setUsername] = useState('');
    const [message, setMessage] = useState('');

    const onChangeUsername = e => setUsername(e.target.value);
    const onChangeMessage = e => setMessage(e.target.value);

    const onClick = () => {
        alert(`${username}: ${message}`);
        setUsername('');
        setMessage('');
    };

    const onKeyPress = e => {
        if (e.key === 'Enter') {
            onClick();
        }
    };

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

export default FunctionStyleComponent;

### Component Details

1. **Imports and Component Definition**:
   ```jsx
   import React, { useState } from 'react';

   const FunctionStyleComponent = () => {
   ```
   - The component imports `React` and the `useState` hook from the React library. `useState` is a hook that lets you add React state to functional components.
   - `FunctionStyleComponent` is defined as a functional component, which is the modern approach to building React components with hooks.

2. **State Initialization with Hooks**:
   ```jsx
   const [username, setUsername] = useState('');
   const [message, setMessage] = useState('');
   ```
   - Two pieces of state are initialized using `useState`. `username` and `message` both start as empty strings. `setUsername` and `setMessage` are the corresponding setters for updating these state values.

3. **Event Handlers**:
   - **onChange Handlers**:
     ```jsx
     const onChangeUsername = e => setUsername(e.target.value);
     const onChangeMessage = e => setMessage(e.target.value);
     ```
     - These handlers update the respective state values as the user types into the input fields, making them controlled components.
   - **onClick Handler**:
     ```jsx
     const onClick = () => {
         alert(`${username}: ${message}`);
         setUsername('');
         setMessage('');
     };
     ```
     - This function is triggered when the button is clicked. It constructs a string from `username` and `message` and displays it in an alert. After displaying the alert, it resets both state values to empty strings.
   - **onKeyPress Handler**:
     ```jsx
     const onKeyPress = e => {
         if (e.key === 'Enter') {
             onClick();
         }
     };
     ```
     - This handler listens for the "Enter" key press event. If the "Enter" key is pressed, it triggers the `onClick` function, mimicking a button click.

4. **Rendering the Component**:
   ```jsx
   return (
       <div>
           <h1>Event Practice</h1>
           <input
               type="text"
               name="username"
               placeholder="사용자 이름"
               value={username}
               onChange={onChangeUsername}
               onKeyPress={onKeyPress}
           />
           <input
               type="text"
               name="message"
               placeholder="아무거나 입력하세요"
               value={message}
               onChange={onChangeMessage}
               onKeyPress={onKeyPress}
           />
           <button onClick={onClick}>확인</button>
       </div>
   );
   ```
   - The component renders a `div` containing a header and two input fields for the username and message. Each input handles changes via `onChange` to maintain the state and listens for key presses to submit with `onKeyPress`.
   - A button is included to manually trigger the message submission using `onClick`.

### Summary

This functional component is an excellent example of modern React practices, utilizing hooks for state management and functional components for clean and efficient code structure. It effectively demonstrates handling multiple inputs and incorporating both click and key press events to interact with the user, making it ideal for understanding basic interaction patterns in React applications.