useRef

리액트에서 어떤 값을 변수에 저장하고 갱신하려고한다.

그 값은 closure여서 reference가 바뀌지 않아야 한다.

만약 새로운 값으로 갱신하려할때 컴포넌트가 리랜더링 되지 않으면 좋겠다.

할때!! useState가 아닌 useRef를 쓰면 된다. useInterval을 만들어보면서 배워보자

function useInterval(callback,delay) {
 const savedCallback = useRef(null)
 
 useEffect(()=>{
   savedCallback.current = calllback
 },[callback])
  
  
  useEffect(()=>{
   if(delay !== null) {
     const tick = savedCallback.current
     const id = setInterval(tick,delay)
     return () => clearInterval(id)
   }
  
  },[delay])
  
}

그럼 딱 current라는 공간에 callback이 들어가면서 리랜더링은 되지 않는다.