[React] 리액트 ref 객체 여러개 만들기

① 리스트(FILTER_LIST) 길이에 맞춰 각 항목의 ref 미리 생성한다.

import { createRef } from 'react';

// 함수 컴포넌트 본문
const entriesRef = useRef(FILTER_LIST.map(() => createRef<HTMLDivElement>()));

 

② map으로 렌더링한 각 요소에 위에서 만든 ref를 순서대로 연결한다.

// 함수 컴포넌트 리턴문
FILTER_LIST.map((name, i) => <div ref={entriesRef.current[i]}>{name}</div>);