[React] useEffectEvent hook

[React] useEffectEvent hook

React의 새로운 실험적 API인 useEffectEvent에 대해 들어보셨나요?

이 훅은 Effect 내부에서 최신 상태와 props 값을 안전하게 사용할 수 있도록 도와줍니다.

이번 글에서는 useEffectEvent의 개념과 활용 방법을 쉽게 설명해드리겠습니다.

 

 

기존 문제점

보통 useEffect를 사용할 때, 의존성 배열을 잘못 관리하면 최신 상태나 props 값을 참조하지 못하는 문제가 발생할 수 있습니다.

특히, 비동기 로직이 포함된 경우 이러한 문제는 더 복잡해집니다.

 

그리고 반응적인 값이 (state, props, 등등) 사용되지만 원하는 의존성 배열만 넣으려고 거기에 추가하지 않게되면 linter가 에러를 발생할 수 있습니다.

이럴때 필요한 훅입니다.

 

 

useEffectEvent란?

useEffectEvent는 이러한 문제를 해결하기 위해 도입된 새로운 훅입니다.

이 훅을 사용하면 이벤트 핸들러가 항상 최신 상태와 props 값을 참조할 수 있습니다.

 

 

 

사용 예시 1

import { useState, useEffect } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  function handleMove(e) {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  }

  useEffect(() => {
    window.addEventListener('pointermove', handleMove);
    return () => window.removeEventListener('pointermove', handleMove);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

 

위 코드에서는 handleMove 함수가 useEffect 의존성 배열에 포함되지 않아서, canMove 상태가 변경되어도 React는 이를 감지하지 못합니다. 따라서, handleMove 함수는 초기 렌더링 시의 canMove 값만을 참조하게 되어, 이후 canMove 값이 변경되어도 이를 반영하지 못합니다.

 

다음은 useEffectEvent를 사용하여 개선된 코드입니다:

import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  const onMove = useEffectEvent(e => {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  });

  useEffect(() => {
    window.addEventListener('pointermove', onMove);
    return () => window.removeEventListener('pointermove', onMove);
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        The dot is allowed to move
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

 

위 코드에서는 useEffectEvent를 사용하여 onMove 핸들러를 정의했습니다. 이제 이 핸들러는 최신 canMove 값을 참조하여, 상태가 변경되더라도 올바르게 동작합니다.

 

 

 

 

사용 예시 2

예를 들어, 채팅방에 접속할 때 알림을 보여주고 싶다고 가정해봅시다.

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';
import { showNotification } from './notifications.js';

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme); // ⚠️ theme은 항상 초기 값만 참조
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  
  return <h1>Welcome to the {roomId} room!</h1>
}

이를 해결하기 위해선 dependency 배열에 theme를 추가하면 됩니다.

그러니 theme는 roomId와 다르게 다른 방식으로 변화할수도 있고, 적절하지 않기때문에 추가하는것은 적절하지 않습니다.

그럴때 최신 theme를 참조하면서 roomId만 바뀌었을때 재실행되게 하려고 합니다. 

 

다음은 useEffectEvent를 사용한 코드 예시입니다:

import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';
import { createConnection } from './chat.js';
import { showNotification } from './notifications.js';

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

  return <h1>Welcome to the {roomId} room!</h1>
}

 

 

1. 안전한 값 참조:
   • useEffectEvent로 정의된 onConnected 핸들러는 최신 theme 값을 안전하게 참조합니다.
   • 이는 URL이 변경되더라도 핸들러는 올바른 값을 참조하게 합니다.
2. 비동기 로직에서의 안정성:
   • 비동기 로직 (예: setTimeout)이 포함된 경우에도 최신 상태를 유지합니다.
   • roomId가 변경될 때마다 useEffect가 재실행되며, 이전 연결은 클린업 함수에서 정리됩니다.

 

 

 

 

사용 예시 3

페이지 방문을 기록하는 예시를 보겠습니다.

사용자가 페이지를 방문할 때마다 URL과 쇼핑 카트의 아이템 수를 기록하고 싶다고 가정해봅시다.

import { useEffect, useContext } from 'react';
import { ShoppingCartContext } from './ShoppingCartContext.js';

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  useEffect(() => {
    setTimeout(() => {
      logVisit(url, numberOfItems); // ⚠️ numberOfItems는 항상 초기 값만 참조
    }, 5000); // 5초 지연 후 호출
  }, [url]);
}

 

여기서도 동일한 이슈가 발생합니다.

디펜던시 배열에 numberOfItems를 넣으면 되지만 좀더 목적에 맞게 배열을 사용하기위해서

해당 함수를 따로 빼서 최신의 값을 참조하도록 수정합니다.

 

function Page({ url }) {
  const { items } = useContext(ShoppingCartContext);
  const numberOfItems = items.length;

  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, numberOfItems);
  });

  useEffect(() => {
    setTimeout(() => {
      onVisit(url);
    }, 5000); // 5초 지연 후 호출
  }, [url]); // URL이 변경될 때마다 Effect 재실행
}

 

여기서 onVisit은 useEffectEvent로 정의되어 최신 numberOfItems 값을 참조합니다.

URL이 변경될 때마다 Effect가 재실행되고, 이로 인해 방문 기록이 최신 값을 참조하게 됩니다.

 

 

 

중요한 포인트

1. 이슈: 
   • useEffectEvent를 사용하기 전에는 useEffect 내부의 비동기 코드가 초기 값만을 참조하여 최신 상태를 반영하지 못하는 문제가 발생합니다.
2. 안전한 값 참조:
   • useEffectEvent로 정의된 onMove 및 onVisit 핸들러는 최신 상태와 props 값을 안전하게 참조합니다.
   • 이는 URL이나 다른 상태가 변경될 때도 핸들러가 올바른 값을 참조하게 합니다.
3. 비동기 로직에서의 안정성:
   • 비동기 로직 (예: setTimeout)이 포함된 경우에도 최신 상태를 유지합니다.
   • URL이 변경될 때마다 Effect가 재실행되고, 이로 인해 방문 기록이 최신 값을 참조하게 됩니다.

 

 

 

결론

useEffectEvent는 React의 비동기 로직과 최신 상태 및 props 값을 안전하게 관리할 수 있는 강력한 도구입니다.

이를 통해 복잡한 의존성 배열 문제를 피하고, 최신 상태를 안정적으로 참조할 수 있습니다.

특히 비동기 로직이 포함된 경우 매우 유용합니다.

이제 여러분도 useEffectEvent를 사용해보세요!

더 안전하고 예측 가능한 코드를 작성할 수 있을 것입니다.

 

 

 

 

주의사항!

1. useEffectEvent는 Effect 내부에서만 호출하기

useEffectEvent는 Effect 내부에서만 호출해야 합니다.

이를 다른 컴포넌트나 훅으로 전달해서는 안 됩니다.

잘못된 사용 예시

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

  const onTick = useEffectEvent(() => {
    setCount(count + 1);
  });

  useTimer(onTick, 1000); // 🔴 잘못된 사용: Effect Event를 전달함

  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  useEffect(() => {
    const id = setInterval(() => {
      callback();
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay, callback]); // "callback"을 의존성으로 지정해야 함
}

이 방식은 좋지 않습니다.

useEffectEvent를 다른 훅이나 컴포넌트로 전달하면 의존성 관리가 복잡해지고, React가 의도한 대로 작동하지 않을 수 있습니다.

 

 

2. Effect Events는 로컬로만 사용하기

Effect Event는 Effect 코드의 비반응성 부분으로, 이를 사용하는 Effect와 가까운 곳에 선언해야 합니다.

function Timer() {
  const [count, setCount] = useState(0);
  useTimer(() => {
    setCount(count + 1);
  }, 1000);
  return <h1>{count}</h1>
}

function useTimer(callback, delay) {
  const onTick = useEffectEvent(() => {
    callback();
  });

  useEffect(() => {
    const id = setInterval(() => {
      onTick(); // ✅ 올바른 사용: 로컬에서만 호출
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay]); // "onTick"은 의존성에 포함할 필요 없음
}

 

이 방식은 Effect Event가 사용되는 곳과 가까운 위치에 선언되며, 의존성 배열을 간소화할 수 있습니다.

 

요약

1. Effect 내부에서만 호출:
   • useEffectEvent는 다른 컴포넌트나 훅으로 전달하지 않고, 오직 Effect 내부에서만 호출해야 합니다.
2. 로컬로만 사용:
   • Effect Event는 사용되는 Effect와 가까운 위치에 선언해야 하며, 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

이러한 주의사항을 지키면 useEffectEvent를 안전하게 사용하여 최신 상태와 props 값을 참조할 수 있습니다. 이를 통해 비동기 코드에서의 예측 가능성과 안정성을 높일 수 있습니다.

 

 

 

 

 

참조!

https://react.dev/learn/separating-events-from-effects

Separating Events from Effects – React