useRef란?

useRef는 React에서 제공하는 Hook 중 하나로, 주로 DOM 요소에 접근하거나 컴포넌트의 상태를 변경하지 않고도 값을 기억할 때 사용됩니다.

useRef는 함수형 컴포넌트에서 변동 없이 값이 유지되어야 하는 경우에 유용하다.

주로 다음과 같은 상황에서 사용한다.

• useRef를 사용하여 컴포넌트가 렌더링될 때 생성되는 DOM 요소에 직접적으로 접근할 수 있다.

• useRef는 렌더링 사이에 값이 변경되어도 컴포넌트를 다시 렌더링하지 않으며, 이전 값을 기억할 때 사용할 수 있다.

useRef예시

const countRef = useRef(0);
console.log(countRef);

useRef를 이용해서 초기값을 0으로 설정
콘솔로 확인해보면 countRef에 0이 담겨있는 것을 확인할수 있다.
변경도 가능한데

const countRef = useRef(0);
console.log(countRef);

countRef.current = 1;
console.log(countRef);

여기서 주목 할 점은 useRef 객체의 current 속성을 수정하더라도 컴포넌트를 다시 렌더링하지 않는다는 것이다. 이는 컴포넌트를 다시 렌더링하지 않으면서 렌더링 간에 값을 유지하고 싶을 때 유용하게 사용할수 있겠다.