useRef 가 DOM 선택하는 것 외에 또 다른 용도 [Today I Learned - React]

컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음

 

useRef 로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않음

 

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

 

useRef 로 만든 변수로 관리할 수 있는 것
1. setTimeout, setInterval을 통해 만들어진 id
2. 외부 라이브러리를 사용하여 생성된 인스턴스
3. scroll 위치....!!

 

 

 

요기서 잠깐! 그냥 일반 변수를 안만들고 왜 굳이 useRef 로 변수를 만드느냐?
컴포넌트는 그 컴포넌트의 state나 props가 변경될 때마다 호출되는데(re-rendering), 함수형 컴포넌트는 일반 자바스크립트 함수와 마찬가지로 호출될 때마다 함수 내부에 정의된 로컬 변수들을 초기화 함.

일반 변수는 함수가 호출될 때마다 초기값을 뱉어냄 반면 useRef로 만들어진 객체는 React가 만든 전역 저장소에 저장되기 때문에 함수를 재 호출하더라도 마지막으로 업데이트한 current 값이 유지됨