latest Ref 패턴과 useEffectEvent()

latest Ref 패턴이란?

간단히 말해 ‘리액트의 통제를 받지 않는 순수한 JS 공간 어디서든 안전하게 최신 값을 꺼내올 수 있는 디자인 패턴’이다.
보통 클로저(Closure) 문제로 인한 것인데, 커스텀 훅이나 useEffect, setTimeout 등에서 콜백 함수를 사용할 때, 클로저 특성상 함수가 생성된 시점의 state나 props 값을 계속 붙잡고 있어서 예전 값(클로저에 갇힌 값)을 참조할 수 있기 때문에 최신 상태를 유지하지 못한다.
다른 해결 방안으로 비교적 최신에 나온 기술인 useEffectEvent()가 있다.
- useEffectEvent()는 ‘비반응형 코드’를 분리하기 좋은 대안이라고 하는데, 쉽게 말하면 위에 ‘latest ref pattern’을 리액트에 제공하기 위한 공식 내장 훅이다.
- 중요한 제약 사항
  - useEffectEvent가 반환하는 함수는 일반적인 useCallback과 달리 매우 엄격한 제약을 갖는다.
    - 1. 오직 useEffect 내부에서만 호출해야 한다.
    - 1. 다른 컴포넌트나 커스텀 훅의 인자로 전달하면 안된다. 즉, 해당 컴포넌트 내부의 이펙트 안에서만 고여서 작동해야 한다.
    - 1. 렌더링 도중에 호출하면 안된다. 리액트가 렌더를 완전히 마치고 커밋 단계가 지난 후에 최신 값을 보장받기 때문이다.