[React]useRef

이번에는 useRef라는 hook에 대해서 정리하고자 합니다. 이름에서 알 수 있듯이 리액트에서 사용되는 데이터의 참조와 관련된 기능입니다.

리액트에서 State가 변하면 렌더링이 일어나고 컴포넌트 내부의 변수들을 초기화 시킵니다. 만약 초기화하지 않고 변수값을 유지하고 싶다면 useRef를 사용할 수 있습니다.

useRef는 주소값을 저장하며 상태가 변경되어 렌더링이 발생하더라도 그 값을 유지합니다.

useRef를 사용하면 DOM reference를 잘 활용할 수 있습니다. 예를 들어 focus,
text selection, media playback, 애니메이션 적용, d3.js, greensock 등 DOM 기반 라이브러리 활용 시에 DOM 요소의 주소값을 활용할 때 사용이 가능합니다.

useRef를 사용하여 변수에 할당

useRef의 초기값을 전달인자로 받아 객체를 리턴합니다. 리턴된 객체 내부에는 current라는 key값을 가지며 전달한 초기값을 value값으로 가지고 있습니다.

const value = useRef(0); 

console.log(value); // { current : 0 }

useRef를 사용하여 DOM 요소 접근

input 태그의 ref 속성으로 uesRef 실행 후 반환된 객체를 넘겨주고 useEffect를 이용하여 화면이 처음 렌더링 될 때 input 태그를 포커싱해 줄 수 있습니다.

const ref = useRef(); 

useEffect() => {(
 ref.current.focus();
},[])

<input ref={ref} type="text"/>