React - useRef를 QuerySelectorAll처럼 (1/2)

useRef를 querySelectorAll처럼..

useRef를 사용하는데, 여러가지 DOM Element들을 사용 하고 싶다면?

마음이 불편해진다..

프로젝트를 진행 하다가...

슬라이더를 만드려고 했는데,

useRef를 사용해서 조작하려고 했다.

그렇지만, 내가 배운 useRef는 하나의 요소에는 하나의 useRef를 사용하는 것이었는데, 내가 원하는 것은

querySelectorAll 과 같이 여러 공통 요소들을 하나의 변수에 담아 조작하고 싶은 것이었다.

당연히 배열에 담아야 하므로 배열로 선언해줌

const slideRef = useRef([ ])

	{Object.keys(theme.imgSrc.mainImg).map((url, i) => {
          return (
            <StMainDivImg
              ref=?? // 어케 코드작성해야할까?
              key={uuid()}
              $bgUrl={url}
              $first={i === 0 && "true"}
            />
          );
	 })}
     
     // 배열에 담고 싶습니다. 

ref 의 안을 들여다 보자

// React임
<div className='test' ref= {props=>console.log(ref)}></div>
// <div className='test'></div> 가 찍힌다.

addEventListener를 사용 할 때 , Element.addEventListener('click', function( e ) ) 에서 숨겨진 argu가 있듯이
ref에도 함수형태로 써주면 숨겨진 argu가 있는데, argu는 ref 당하는 element이다.

따라서 해결 방향이 나온다.

Array.push를 해주자

const slideRef = useRef([ ])

	{Object.keys(theme.imgSrc.mainImg).map((url, i) => {
          return (
            <StMainDivImg
              ref={ el => slideRef.current[i] = el }
              key={uuid()}
              $bgUrl={url}
              $first={i === 0 && "true"}
            />
          );
	 })}
     
    console.log(slideRef.current) // <StmainDivImg>가 5개 들어가 있다.