Event Handling

• 카운터 어플리케이션으로 공부하는 이벤트 핸들링
• 일시정지, 시작, 재시작, 리셋 기능 추가

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [time, setTime] = useState(0); // 타이머 시간을 저장하는 상태
  const [isRunning, setIsRunning] = useState(false); // 타이머 동작 여부를 저장하는 상태

  useEffect(() => {
    let intervalId; // setInterval 함수의 반환값을 저장할 변수

    // 타이머가 실행 중일 때마다 1초마다 시간을 증가시키는 함수
    const runTimer = () => {
      intervalId = setInterval(() => {
        setTime(prevTime => prevTime + 1);
      }, 1000);
    };

    // isRunning 상태에 따라 타이머 동작을 제어하는 부분
    if (isRunning) {
      runTimer(); // 타이머를 시작합니다.
    } else {
      clearInterval(intervalId); // 타이머를 멈춥니다.
    }

    // 컴포넌트가 언마운트될 때 clearInterval을 사용하여 메모리 누수를 방지합니다.
    return () => clearInterval(intervalId);
  }, [isRunning]); // isRunning 상태가 변경될 때마다 useEffect가 호출됩니다.

  // 시작 버튼을 클릭할 때 호출되는 이벤트 핸들러
  const handleStart = () => {
    setIsRunning(true); // 타이머를 시작합니다.
  };

  // 일시정지 버튼을 클릭할 때 호출되는 이벤트 핸들러
  const handlePause = () => {
    setIsRunning(false); // 타이머를 일시정지합니다.
  };

  // 재시작 버튼을 클릭할 때 호출되는 이벤트 핸들러
  const handleResume = () => {
    setIsRunning(true); // 타이머를 재시작합니다.
  };

  // 리셋 버튼을 클릭할 때 호출되는 이벤트 핸들러
  const handleReset = () => {
    setTime(0); // 시간을 초기화합니다.
    setIsRunning(false); // 타이머를 멈춥니다.
  };

  return (
    <div>
      <p>경과 시간: {time}초</p>
      <button onClick={handleStart}>시작</button>
      <button onClick={handlePause}>일시정지</button>
      <button onClick={handleResume}>재시작</button>
      <button onClick={handleReset}>리셋</button>
    </div>
  );
};

export default Timer;

1. useState 훅을 사용

   1. 타이머의 시간을 저장하는 time 상태
   2. 타이머의 동작 여부를 저장하는 isRunning 상태

2. useEffect 훅을 사용 → 타이머 동작 제어

   isRunning 상태에 따라 타이머가 시작되거나 멈추도록

   타이머가 언마운트될 때 clearInterval 함수를 사용하여 메모리 누수를 방지

3. 시작(handleStart), 일시정지(handlePause), 재시작(handleResume), 리셋(handleReset) 버튼

   이벤트 핸들러 호출하도록 구현

   각각의 버튼에 onclick 속성으로 등록되어있음 → 사용자의 클릭이벤트에 반응

Event Handler Naming하기

• Props의 경우 : 보통 onClick과 같이 on접두사를 지정

import React from 'react';

const Button = ({ onClick, text }) => {
  return (
    <button onClick={onClick}>{text}</button>
  );
};

export default Button;

• Function Names의 경우: 보통 handleClick과 같이 handle접두사를 지정

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

→ 두가지 경우 동시 사용 가능

React Bubbling?

부모 요소로부터 자식 요소로 이벤트가 전파되는 현상

import React from 'react';

const ParentComponent = () => {
  const handleParentClick = () => {
    console.log('부모 요소가 클릭되었습니다.');
  };

  return (
    <div onClick={handleParentClick} style={{ border: '1px solid black', padding: '20px' }}>
      <ChildComponent />
    </div>
  );
};

const ChildComponent = () => {
  const handleChildClick = () => {
    console.log('자식 요소가 클릭되었습니다.');
  };

  return (
    <button onClick={handleChildClick}>자식 버튼</button>
  );
};

export default ParentComponent;