[React] useRef

javascript에서 특정 DOM은 선택해야 하는 경우에는 querySelector와 같은 DOM Selector 함수를 사용을 한다. React에서도 간혹 특정 DOM을 선택해야 하는 경우가 있다.

 

• 특정 엘리멘트의 크기를 가져올 때
• 현재 스크롤의 위치를 가져올 때
• 미디어를 실행 또는 정지 할 때
• 애니메이션을 적용할 때
• DOM 기반 라이브러리를 사용할 때, 등등

이럴 때 사용할 수 있는 것이 useRef이다. useRef로 DOM 노드, 엘리멘트 그리고 React 컴포넌트의 주소 값을 참조할 수 있다.

const textInput = useRef(null);

return(
    <div>
    	<input ref={textInput} type="text" />
    </div>
)

이렇게 가져온 주소값은 컴포넌트가 re-render 되어도 바뀌지 않는다. 그리고 useRef로 관리되고 있는 변수의 주소 값이 바뀐다고 해도 re-render 되지 않는다.

 

input 엘리멘트의 value를 가져오는 방법 중에 하나로는 onChange 이벤트를 활용해서 state 값을 바꾸는 것인데, 이 방법의 단점은 input 값이 바뀔 때마다 렌더링 된다는 것이다. useRef를 활용하면 이 단점을 해결할 수 있다.

const [text, setText] = useState('');
const textInput = useRef(null);

const getInput = () => {
    setText(textInput.current.value);
}

return(
    <div>
    	<input ref={textInput} type="text" />
        <button onClick={getInput}>Add</button>
    </div>
)