useRef와 권장사항

useRef

리렌더링없이 값을 변화시킬 수 있는 hook

const ref = useRef(0);

{
	current: 0 // The value you passed to useRef
}

 

useRef는 current를 key로 하는 객체를 반환한다.

따라서 ref.current 로 ref의 현재값에 접근할 수 있다.

---

언제 사용하는가?

 

• DOM 요소에 직접 접근하거나 조작할 때
• 리액트 외부 API를 사용할 때 ex) timeout IDs

---

권장사항

 

• 렌더링 중 ref를 읽거나 쓰지마라.
  
  ref는 react의 렌더링 사이클과 독립적으로 실행되기 때문에
  react는 ref의 현재값이 업데이트 됐는지 안 됐는지 모른다.
  
  따라서 렌더링 시점에선 아직 ref의 값이 업데이트되지 않았거나,
  DOM이 아직 생성되지 않았을 수도 있다.

• ref는 이벤트핸들러나 effect 내에서 사용하는 것이 안전
  
  리액트가 Commit단계에서 DOM을 업데이트 한 후에
  ref가 DOM요소에 연결하는 것이 가장 안전하다
  
  따라서 commit이 이루어진 상태에서 실행되도록, 
  이벤트핸들러나 effect 내에서 사용하도록 한다