useRef 사용 + current[] + typescript

Darcy Daeseok YU ·2022년 2월 10일
1
post-custom-banner

특정 element에 접근하려고 한다. useRef를 써야겟다.
하지만 배열 길이 만큼 element를 생성하는데 useRef를 element 개수 만큼 쓰려니 코드가 깔끔하지 않다.

const ref1 = useRef <null | HTMLDivElement > (null); 
const ref2 = useRef <null | HTMLDivElement > (null); 
const ref3 = useRef <null | HTMLDivElement > (null); 

<div ref={ref1} />
<div ref={ref2} />
<div ref={ref3} />
...

ref1.current에 null | HTMLDivElement 값이 들어온다.

current를 배열[ ] 로 만드는 방법이 있어서 기록한다.

const ref = useRef <null | HTMLDivElement[] > ([]); 

ref.current[0]
ref.current[1]
...
이런 식으로 사용가능하다.
그럼 배열에 어떻게 element를 담을까?

<div ref={itself => ref.current[0] = itselft} /> 

기억하자.

profile
React, React-Native https://darcyu83.netlify.app/
post-custom-banner

0개의 댓글