useRef()

최종 수정 : 2024-06-17

useRef()

ref라는 속성에 적용하는 값을 만들어 주는 훅이다.

컴포넌트에서 지정된 값 대부분은 애플리케이션의 사용자 인터페이스에 직접 표시된다. 그러나 때로는 사용자가 사용하기 위해서가 아니라 앱 메키너즘의 일부분으로만 변수를 사용할 때가 있다. 어느 경우든, 사용자에게 값을 표시할 필요가 없으므로 값이 달라져도 자동으로 재렌더링이 일어나지 말아야 한다. 즉, 상태 값을 관리하되 상태 변경 시 리액트가 UI를 재렌더링하는 일을 피하고 싶을 때는 useRef()를 사용한다.

 

# ref 속성이란?

모든 리액트 컴포넌트는 reference의 앞 글자를 딴 ref 속성을 제공한다. ref 속성값은 사용자 코드에서 설정하는 것이 아니라 어떤 시점에 리액트 프레임워크 내부에서 설정해 준다. ref 속성은 초기에는 null이었다가 마운트되는 시점에서 물리 DOM 객체의 값이 된다. 즉, ref는 물리 DOM 객체의 참조이다.

 

HTML 요소들은 자바스크립트로는 DOM 타입 객체이다. HTMLElement 타입은 click(), blur(), focus() 메서드들은 리액트 요소가 가상 DOM 상태일 떄는 호출할 수 없고, 물리 DOM 상태일 때만 호출할 수 있다. ref 속성값은 물리 DOM 상태일 떄의 값이므로 ref로 얻은 값(즉, DOM 객체)을 사용해 click()과 같은 메서드를 호출할 수 있다.

---

참고 자료

리액트 모던 웹 개발 with 타입스크립트 (p.334-336)

리액트 훅 인 액션 (p.159, 175-176)