[React] useRef 사용하는이유에 대해서

 

const refTarget = useRef(init);

useRef를 사용하는이유

• 값 저장 : 현재 저장하고 싶은 값을 re-rendering없이 저장
• DOM 참조 : DOM을 참조할 수 있다.  element의 scroll위치, image의 size 등을 참조
• => useState로 관리하게 되면, rendering이 계속 발생하므로 비효율적이고, 코드짜기가 어렵다.

 

얼핏 보면 useState와 비슷하다.

 

state와 ref의 차이점

• state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
• ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.

 

DOM참조

• 스크롤관련 scrollTop, scrollLeft,scrollTo,scrollBy,scrollIntoView
• 이미지 사이즈 참조

function callbackFunc = (e) => {
  console.log(e.target.scrollTop)
}
return (
  <div onScroll={callbackFunc})> File.png </div>
)