[React] useEffectEvent 사용처

useEffectEvent

useEffect 안에서 state의 최신 값은 쓰고 싶지만 useEffect 재실행은 하고 싶지 않을 때 사용한다.

function Page({ url, theme }) {
  useEffect(() => {
    // 테마만 바꿔도 이 로그가 다시 찍힘
    console.log(`Log visit to ${url} with theme: ${theme}`);
  }, [url, theme]); // theme을 의존성에 넣어야만 최신 theme을 참조할 수 있음

  return <div>현재 페이지: {url}</div>;
}

 

useEffect 안에서는 클로저 때문에 state의 최신 값을 불러오지 못하기 때문이다.

 

결국 useEffect의 의존성에 어쩔 수 없이 해당 state를 넣어야 하는데,

state의 값이 변경될 때마다 계속해서 실행된다는 문제가 있다.

 

useRef를 써서 state가 변경될 경우 ref를 변경하는 방법을 쓰면 되긴 하는데,

코드가 지저분해진다는 단점이 있다.

 

이 때 useEffectEvent를 사용하면 코드가 깔끔해진다.

function Page({ url, theme }) {
  const onVisit = useEffectEvent((visitedUrl) => {
    console.log(`Log visit to ${visitedUrl} with theme: ${theme}`);  // 최신 theme 값
  });

  useEffect(() => {
    // theme이 바뀔 때는 이 Effect가 재실행되지 않음
    onVisit(url);
  }, [url]);

  return <div>현재 페이지: {url}</div>;
}

 

 

그리고 부모에서 내려주는 함수를 useEffect 안에서 실행하려면

의존성 배열에 그 함수를 넣어줘야 하는데(린트 경고),

만약 부모가 리렌더링 된다면 useEffect가 실행된다.

그래서 부모에서 해당 함수를 useCallback으로 감싸야 한다.

function Page({ url, onVisit }) {
  useEffect(() => {
    onVisit(url);
  }, [url, onVisit]);  // onVisit은 부모에서 useCallback으로 감싸진 상태
  
  // ...
}

 

하지만 이 경우도 그냥 자식에서 useEffectEvent를 쓰면 useCallback을 안 써도 된다.

function Page({ url, onVisit }) {
  const onVisitEvent = useEffectEvent((visitedUrl) => {
    onVisit(visitedUrl);
  });

  useEffect(() => {
    onVisitEvent(url);
  }, [url]);

  return <div>현재 페이지: {url}</div>;
}

 

공식문서 피셜) useEffectEvent로 만든 함수는 useEffect 안에서만 사용해야 하고 다른데서는 쓰면 안된다.

 

참고.

 

https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event

Separating Events from Effects – React

 

 

 

---

하루가 너무 짧지만...

요즘 너무 바이브 코딩이니 에이전틱 코딩이니 하는 격동의 AI 개발기에 시달리고 있어서

조금이라도 초심을 찾고자 짬을 내서 공부를 하려고 합니다.