react hooks map 에서 ref 를 지정하자

TOC

1. map을 통해 여러 HTML elements를 생성하고 이에 ref를 지정하려면

2. 방법

1.map을 통해 여러 HTML elements를 생성하고 이에 ref를 지정하려면

하나의 div에 useRef를 사용해 ref를 지정해 주는 것은 어렵지 않다

const ref=useRef();
...
<div ref={ref}/>

하지만 map을 통해 여러 elements를 만들어 내는 경우는 어떨까?

const refs=useRef();
{[...Array].map((v)=>(<li ref={refs}>{v}</li>))}

이런 느낌으로 만들게 된다면 undefined를 가리키는 ref값을 받아볼 수 있다.

2. 방법

1. 우선 우린 ref가 담아내야 할 양이 많아졌다는 것을 인정해주어야 한다.
   따라서 이를 배열에 담아주도록 하자.

const refs=useRef([]);

2. 또한 ref를 통해 접근 가능한 current도 원래의 기능보다 많은 양의 elements를 가리켜야 한다는 것을 인정해야 할 것이다. 둘은 사실상 한 몸이니까.

const refs.current=[];

3. 이제 refs=[] 배열이고 current=[] 배열이 되었다. 즉 refs=[current[]] 처럼 이차원 배열이 된 것이고
   이제 ref를 current에 순서대로 넣어주기만 하면 된다.

const addToRefs=(el)=>{refs.current.push(el)}
...
{[...Array].map((v)=>(<li ref={addToRefs()}>{v}</li>)

이제 이런식으로 초기화를 마친 refs에 접근해 그 값을 사용하면 된다.