[React] useRef

romini·2021년 10월 27일
0

useRef() 왜 사용할까?

JavaScript 에서 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

React에서는 DOM이 렌더링 되기 전에 위 함수를 사용할 수 없기 때문에 useRef를 사용해서 DOM을 선택해야한다.


DOM을 참조하기

const refDOM = useRef();
const scrollRef = useRef(); //배열로 선언하여 여러개의 DOM을 참조

처음에는 아무것도 참조하지 않는 undefined 상태이기 때문에 DOM의 ref속성으로 특정 DOM을 참고하게 해야한다.

<Component ref={refDOM}/>
  • 배열 참조
<MainPage ref={el =>{scrollRef.current[0] = el}}/>
<ProfilePage ref={el =>{scrollRef.current[1] = el}}/>
<SkillPage ref={el =>{scrollRef.current[2] = el}} />
<ProjectPage ref={el =>{scrollRef.current[3] = el}}/>
<ContactPage ref={el =>{scrollRef.current[4] = el}}/>

참조한 DOM 사용하기

0개의 댓글