Handling User Events

Definition of Events

• Event: A user action or occurrence that can be detected by a program, such as a mouse click, key press, or window resize.
• Event Handler: A function that responds to an event by executing a specific action or behavior.
• Event Listener: A function that listens for a specific event and triggers an event handler when the event occurs.
• Event Propagation: The process by which events are passed from the target element to its parent elements in the DOM hierarchy.

Event Naming and Usage in React

• Event Naming: Events in React are named using camelCase, such as onClick for a click event.
• Event Handling: Events are handled by passing event handlers as props to React elements. You pass a function as the event handler, not a string.

Example:

<!-- HTML -->
<button onclick="handleClick()">Click Me!</button>

// React
function handleClick() {
  console.log('Button clicked');
}
 
<button onClick={handleClick}>Click Me</button>

useState Hook for Handling State

• useState Hook: A React Hook that allows functional components to manage local state.
• State Variable: A variable that holds the current state of a component and triggers a re-render when updated.
• State Setter Function: A function used to update the state variable and trigger a re-render.

Syntax:

import React, { useState } from 'react';
 
const [state, setState] = useState(initialValue);

state is the current value of the state. setState is the function used to update the state. initialValue is the starting value of the state.

Example: Simple Click Counter Component

import React, { useState } from 'react';
 
function ClickCounter() {
  // Declare a state variable called 'count', initialized to 0
  const [count, setCount] = useState(0);
 
  // Function to handle button clicks
  const handleClick = () => {
    setCount(count + 1); // Update the state to the new value
  };
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
 
export default ClickCounter;

Initializing State: const [count, setCount] = useState(0); initializes the state variable count to 0 and provides a function setCount to update it. Updating State: The handleClick function calls setCount(count + 1); to increase the count state by 1 when the button is clicked. Rendering: The component renders the current count value and a button that triggers the handleClick function.

Synthetic Events:

• Synthetic Events: React's cross-browser wrapper for native browser events, providing consistent event handling across different browsers.
• Event Pooling: React reuses event objects to improve performance, so you cannot access event properties asynchronously.

Example:

import React, { useState } from 'react';
 
function App() {
  const [message, setMessage] = useState('');
 
  const handleClick = (event) => {
    // Use the event object's properties
    setMessage(`Button clicked: ${event.target.innerText}`);
    
    // The event object cannot be accessed asynchronously
    // console.log(event); // Uncommenting this line may cause an error.
  };
 
  return (
    <div>
      <button onClick={handleClick}>Click Me!</button>
      <p>{message}</p>
    </div>
  );
}
 
export default App;

Passing Parameters to Event Handlers:

• To pass additional parameters, use an anonymous function.

Example:

import React, { useState } from 'react';
 
function ClickCounter() {
  const [numClicks, setNumClicks] = useState(0); // useState로 클릭 수 상태 관리
 
  function increaseNumClicks(e, message) {
    console.log(message);
    setNumClicks(numClicks + 1);
  }
 
  return (
    <button 
      onClick={(e) => increaseNumClicks(e, "Hello")}
    >
      Clicks: {numClicks}
    </button>
  );
}
 
export default ClickCounter;

Passing Parameters: (e) => increaseNumClicks(e, "Hello") passes the event object e and the message "Hello" to the increaseNumClicks function.