list의 forwardRef type

forwardRef를 props로 넘길 때 type에 관한 글은 많은데, list로 된 ref를 넘길 때의 글은 없길래 정리했다!

// parent component
export default function TabList() {
    const tabListRef = useRef<HTMLDivElement>(null);
    const tabItemRef = useRef<HTMLButtonElement[]>([]);
  ....
  
    return (
        <div ref={tabListRef}>
            {anyList.map((item, idx) => (
                <TabItem key={item.id} ref={(el: HTMLButtonElement) => {(tabItemRef.current[idx] = el)}} />
            ))}
        </Box>
    );
}

// child component
function TabItem(ref: React.ForwardedRef<HTMLButtonElement>) {
  ...
    return (
      	...
        <button
            onClick={() => {...}}
            ref={ref}
        >
            버튼
        </Button>
  		...
    );
}

export default React.forwardRef(TabItem);

그리고 다른 함수에 이 ref들을 넘겨야 했다..

export default function useTabScroll(
    tabListRef: React.RefObject<HTMLDivElement>,
    tabItemRef: React.MutableRefObject<HTMLButtonElement[]>
) {
  ...
}