const ref = useRef(initialValue);
useRef의 기본 형태입니다. 함수형 컴포넌트에서 useRef는 순수 자바스크립트 객체를 생성합니다. 생성된 객체는 { current: initialValue } 의 형태로 반환이 되기 때문에 ref.current 의 형태로 값의 접근이 가능합니다. 따라서 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다고 표현할 수 있습니다.
useRef는 크게 2가지의 경우에 사용이 됩니다.
자바스크립트의 경우, getElementById, querySelector 등의 메서드를 통해 쉽게 DOM에 접근하여 제어할 수 있습니다. 하지만 React의 경우에는 직접 DOM을 조작하는 것을 권장하고 있지 않습니다. 그럼에도 불구하고 스크롤바 위치를 파악해야 할 경우나 input 요소에 자동 포커스를 설정해 주어야 할 경우처럼 직접 DOM을 제어해 주어야 하는 예외적인 상황이 발생할 수 있는데, 이때 useRef를 사용해 DOM에 접근할 수 있습니다.
<aside> 💡 React에서 DOM의 직접 조작을 권장하지 않는 이유
React는 Virtual DOM을 사용하기 때문에 DOM 조작으로 인한 브라우저 렌더링을 최소화한다는 장점을 가지고 있습니다. 때문에 직접 DOM을 조작하게 된다면 “Virtual DOM을 사용한 브라우저 렌더링 최소화” 라는 React의 장점을 놓치는 일이 발생하게 됩니다. 따라서 가능하다면 직접 DOM을 제어하는 것을 지양하는 것이 좋습니다.
</aside>
또한 useRef를 사용하여 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됩니다. 컴포넌트의 생애주기란 DOM에 마운트되고 언마운트되기까지의 과정을 말합니다. useRef는 .current 의 값이 변경되어도 컴포넌트 리렌더링을 발생시키지 않고, 렌더링을 할 때 동일한 ref 객체를 제공하게 됩니다. 즉, 컴포넌트가 계속해서 렌더링 되더라도 컴포넌트가 언마운트되기 전까지 값이 그대로 유지됩니다. 따라서 컴포넌트 값의 변경은 관리해야 하지만 리렌더링을 발생시킬 필요는 없을 때 활용할 수 있습니다.