useRef를 배열에서 쓰고 싶다

React를 사용하면서 특정 DOM요소에 접근하고 싶은 경우 useRef hook을 사용하여 접근하는것이 일반적이다.

const App = () => {
  const myRef = useRef();
 
  return 
  	<div ref={myRef}>박스</div>
};

보통은 위의 코드 처럼 하나의 요소에 ref 속성을 통해 접근을 하는 방식으로 사용했었지만
이번에 여려가지 div목록들에 각각 ref를 설정하여 해당 요소의 위치로 스크롤을 이동시키는 코드를 작성할 일이 생겼다.

Ref를 여러개 사용하려면 어떡하지??

처음에는 ref를 여러개 만들자는 겁나 단순한 생각을 했지만 이건 아닌것같아 다른 방법을 찾아보던 중 ref를 배열로 만들어 접근하는 방법이 있었다.

const App = () => {
  const scrollControl = useRef([]);
  const dataList = ['데이터들이 여러개 있다고 치자'];
        
  const moveScroll = (id) => {
    scrollControl.current[id]?.scrollIntoView({
      behavior: "smooth",
    });
  };
  
  return (
  	<div>
      {dataList.map((data) => (
        <div
          key={data.id}
          ref={(e) => (scrollControl.current[data.id] = e)}
        >
          {data.id}
        </div>
      ))}
    </div>
  );
};

위의 방식은 map함수를 통해 div들이 렌더릴 될때마다 ref에 id번호를 인덱스처럼 사용하여 ref에 값을 추가해주는 방식이다.
ref.current의 인덱스를 통해 원하는 div에 접근할 수 있다.