useRef (1)

javaScript를 사용할 때에는, 우리가 특정 DOM을 선택해야하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서
DOM 을 사용했다

리액트 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 있다.
예) 특정 엘리먼트의 크기를 가져온다던지, 스크롤바 위치를 가져올 때, 포커스를
설정해야 할 때 등등
이때 useRef 라는 Hook 함수를 사용한다

useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주어야 한다.
그러면 Ref 객체의 .current 값은 우리가 원하는 DOM을 가르키게 된다.

DOM 선택용도 말고 다른용도가 있다
컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리 할 때

useRef로 관리하는 변수는 값이 변한다고 해서 컴포넌트가 리렌더링이 되지 않는다.
리액트 컴포넌트에서 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후 업데이트 된 상태를 조회할 수 있는 반면,
useRef로 관리하고 있는 변수는 설정 후 바로 조회 가능하다

참고한 사이트 (더 자세한 내용이 있다)
https://react.vlpt.us/basic/16-useEffect.html