[타입스크립트] useEffect의 dependencies에서 일어나는 @typescript-eslint/no-explicit-any Eslint 에러

프로젝트 빌드 시, 아래와 같은 Eslint 에러가 났다.
./src/shared/hooks/use-reset-scroll.ts 4:93 Error: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

해당 코드를 찾아가니, useEffect의 의존성배열을 any로 지정해서 Eslint가 에러를 뱉은 것이었다. 타입스크립트의 기본 타입 체계에서도 알 수 있듯이, any는 웬만하면 사용하지 않는 것이 좋다.

import { useEffect, RefObject } from 'react';

// HOOKS: 스크롤 초기화
export function useResetScroll<T extends HTMLElement>(ref: RefObject<T | null>, dependency: any) {
  useEffect(() => {
    if (ref.current) {
      ref.current.scrollTop = 0;
    }
  }, [dependency, ref]);
}

이를 해결하기 위해 unknown을 사용해도 좋지만, 챗지피티 답변 결과 React에서 제공하는 의존성배열 타입 DependencyList이 존재했다.

import { useEffect, RefObject, DependencyList } from 'react';

export function useResetScroll<T extends HTMLElement>(
  ref: RefObject<T | null>,
  deps: DependencyList,
): void {
  useEffect(() => {
    if (ref.current) {
      ref.current.scrollTop = 0;
    }
  }, [...deps, ref]);
}

대신 이렇게 하면 의존성배열을 넘겨주는 쪽에서는 아래와 같이 배열로 넘겨야 한다.

useResetScroll(scrollContainerRef, [id]);