useRef란?
useRef는
.current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한ref객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다. 본질적으로 useRef는.current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다. - React 공식문서
useRef가 필요한 상황
1. 특정 DOM 선택하기
JavaScript 를 사용할 때는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.
리액트에서는 DOM 을 선택할 때
ref를 사용한다. 함수형 컴포넌트에서ref를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용한다.
2. 컴포넌트 안의 변수 관리하기
컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있다.
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있다.
이 변수를 사용하여 다음과 같은 값을 관리할 수 있다.
setTimeout,setInterval을 통해서 만들어진id- 외부 라이브러리를 사용하여 생성된 인스턴스
scroll위치- 배열에 새 항목을 추가할 때 필요한 고유값
key
3. 리렌더링 방지하기
컴포넌트가 렌더링 된다는 것은 함수(컴포넌트)를 호출하여 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수나 또 다른 함수 등)도 매번 다시 선언되어 사용한다.
컴포넌트는 자신의
state가 변경되거나, 부모에게서 받는props가 변경되었을 때마다 리렌더링 된다.
심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 된다.
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않으므로 리렌더링 방지에 활용할 수 있다.
4. 속성 값을 초기화(clear)하기
예를 들어, 타이머와 같은 카운터의 값을 0으로 초기화 할 필요가 있을 때 사용할 수 있다.
setInterval 이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모하기 때문이다.
공식문서에서 말하는 Ref를 사용해야 할 때
Ref의 바람직한 사용 사례는 다음과 같습니다.
포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
애니메이션을 직접적으로 실행시킬 때.
서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요.
예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen이라는 prop을 넘겨주세요.
