[React] useRef 의 개념

useRef를 올바르게 쓰는 방법은 무엇일까?

먼저 useRef가 어떻게 작동하는지부터 알아보자

useRef란 current 객체를 반환하는 Hooks으로써 이렇게 한번 만들어진 current 객체는 랜더링이 발생해도 바뀌지 않고 고유한 값을 유지한다.

무수한 리랜더링 사이에서도 값을 유지해야하는경우 ex) infinite scroll의 식별객체

 

랜더링에 영향을 받지고 끼치지도 않는 특이한 녀석

ref의 변경은 감지되지도 않고 useEffect의 deps로도 사용할 수 없다

 

useRef의 초기값으로 null을 넣오도 되는 이유는?

이자식은 뭐하길래 null을 대부분의 초깃값으로 넣는 걸까?

객체가 선언되고 컴포넌트가 실행되고 평가가 진행되는 시점에서의 current객체는 null로 평가가 되기때문에 초기값이 null이든 뭐든 상관이 없다

 

possibly null

useEffect에서 실행을 해보았을 때에는 current 객체가 생성되어있는 것을 알 수 있다.

이로써 랜더링과 useEffect 실행 사이에서 current 객체가 생성이 되는 것을 알수 있는데 이때 그 사이 타이밍에서 에러가 뜨는 것이므로 랜더링 이후에 동기적으로 실행하는 useLayoutEffect를 통해서 해결할 수 있다.

 

컴포넌트 평가 useLayoutEffect useEffect 순으로 일어난다