useRef 함수는 current 속성을 가진 ref 객체를 반환한다. ref.current 값을 HTMLElement에 할당해서 해당 요소에 focus하거나, 엘리먼트 크기 등을 확인할 수 있다. ref 객체는 아래 특징을 갖는다.

컴포넌트가 다시 렌더링 돼도 ref.current 값은 그대로 유지한다.
ref.current 값이 변경돼도 컴포넌트는 다시 렌더링하지 않는다
HTMLElement 뿐만 아니라 숫자 / 문자열 / 배열 등 값을 할당할 수 있다.

Case 1 — 리렌더링이 필요 없는 값을 관리할 때 ⭐️

*useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. — 출처 : React 공식 문서*

공식 문서에 따르면 useRef 함수가 반환한 ref 객체는 컴포넌트 생애주기를 통해 유지된다고 말한다. 여기서 말하는 생애주기는 DOM에 마운트~언마운트까지 과정이다. 컴포넌트는 변경된 props를 받거나, 자신의 state가 변경되면 다시 렌더링하는데, 이때 컴포넌트가 다시 실행되면서 const a = 1 같은 변수도 재선언/재할당 된다.

const a = 1; // 렌더링할 때마다 값 초기화
const [state, setState] = useState(1); // 값 유지, 값 변경 시 리렌더링
const ref = useRef(1); // 값 유지, 값 변경돼도 리렌더링 안함

아래 2개 버튼이 있다. 상단 버튼을 클릭할 때마다 useState로 생성한 state 값을 1씩 더하고, 하단 버튼도 ref.current 값을 1씩 더한다.

Untitled

상단 버튼을 클릭해서 state 값이 변하면 리렌더링 돼서 화면에 바로 업데이트 된다. 반면 하단 버튼을 클릭해서 ref.current 값이 변해도 리렌더링이 발생하지 않으므로 화면에도 업데이트되지 않는다. 대신 변한 값은 계속 유지하고 있다.

하단 버튼을 3번 누르면 ref.current가 +3 돼서 내부적으로 4 값을 갖고(화면엔 업데이트되지 않음), 다시 상단 버튼을 눌러 state 값이 변경되면 리렌더링이 발생하여 그제서야 변경된 ref.current 값을 볼 수 있다.

🔍️ 전체 코드

이 같은 ref 객체 특성을 이용해 컴포넌트 내부에서 변경된 값을 관리해야 하지만, 화면엔 업데이트(리렌더링) 할 필요 없는 값을 관리할 때 유용하게 쓰인다.