[React] JavaScript의 이벤트와 useEffect와 비교.

JavaScript의 이벤트 실행과 React의 useEffect는 서로 다른 개념이지만, 둘 다 특정 작업을 트리거하는 방법을 제공합니다. 두 개념을 구분하기 위해 각각을 자세히 살펴보겠습니다.

JavaScript의 이벤트

JavaScript의 이벤트는 사용자 상호작용 또는 특정 시스템 이벤트에 응답하여 코드를 실행하는 메커니즘입니다. 예를 들어, 클릭, 키보드 입력, 폼 제출, 페이지 로드 등이 이벤트에 해당합니다. 이벤트 리스너를 사용하여 특정 이벤트가 발생할 때 실행할 코드를 정의할 수 있습니다.

예제: 이벤트 리스너 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Example</title>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        const button = document.getElementById('myButton');

        button.addEventListener('click', () => {
            alert('Button was clicked!');
        });
    </script>
</body>
</html>

위 예제에서는 버튼 클릭 이벤트가 발생할 때마다 경고 창을 표시합니다. 이는 이벤트 리스너를 사용하여 특정 이벤트를 감지하고 처리하는 방식입니다.

React의 useEffect

useEffect는 React 컴포넌트의 생명주기 동안 발생하는 사이드 이펙트를 처리하기 위해 사용됩니다. 여기서 사이드 이펙트란 컴포넌트의 렌더링 외에 수행되어야 할 작업을 의미합니다. 예를 들어, 데이터를 가져오거나 타이머를 설정하는 것 등이 포함됩니다.

useEffect는 컴포넌트가 렌더링될 때와 지정된 의존성 배열의 값이 변경될 때 실행됩니다. 이를 통해 컴포넌트의 생명주기 동안 특정 작업을 자동으로 수행하고, 필요한 경우 정리(cleanup) 작업을 할 수 있습니다.

예제: useEffect 사용

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

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('컴포넌트가 렌더링되었습니다.');

    return () => {
      console.log('컴포넌트가 언마운트되거나 업데이트 전에 클린업됩니다.');
    };
  }, [count]); // count가 변경될 때마다 이펙트가 실행됨

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

위 예제에서는 count 상태가 변경될 때마다 useEffect가 실행됩니다. 컴포넌트가 처음 렌더링될 때와 count 값이 변경될 때마다 콘솔 로그가 출력됩니다.

주요 차이점

트리거 방식:
- 이벤트: 사용자 상호작용이나 시스템 이벤트에 의해 트리거됩니다. 이벤트 리스너를 통해 특정 이벤트가 발생할 때 실행할 코드를 지정합니다.
- useEffect: 컴포넌트의 렌더링이나 특정 상태/props의 변경에 의해 트리거됩니다. 컴포넌트 생명주기 동안 발생하는 작업을 관리합니다.
사용 목적:
- 이벤트: 주로 사용자 입력이나 브라우저 이벤트에 응답하기 위해 사용됩니다.
- useEffect: 데이터 가져오기, 타이머 설정, 구독 등 컴포넌트의 생명주기 동안 발생하는 사이드 이펙트를 처리하기 위해 사용됩니다.
정리 작업:
- 이벤트: 이벤트 리스너를 제거할 수 있지만, 명시적으로 해야 합니다.
- useEffect: 클린업 함수를 통해 컴포넌트가 언마운트되거나 의존성 값이 변경되기 전에 정리 작업을 자동으로 수행할 수 있습니다.

JavaScript의 이벤트와 React의 useEffect는 서로 다른 개념이지만, 특정 작업을 트리거한다는 점에서는 유사합니다. 이벤트는 사용자 상호작용에 직접 반응하는 반면, useEffect 는 컴포넌트의 생명주기 동안 발생하는 사이드 이펙트를 관리하는 데 사용됩니다. 두 개념을 적절히 사용하면 보다 동적인 사용자 인터페이스를 구현할 수 있습니다.

개발