HTML에서 태그를 선택할 때,
우리는 보통 getElementid 혹은 queryselector를 사용하여 특정 DOM에 접근했었다.
react에서 우리는 특정 DOM을 선택할 때 useRef를 사용한다.
즉 , useRef는 DOM 요소에 접근할 때 사용하는 React의 Hooks이다.
useRef의 다른 기능으로는 불필요한 렌더링을 막을 수 있다.
react 컴포넌트에서 변수에 특정 데이터를 저장하고 싶을 때 useState를 사용했었다.
useState는 데이터를 저장할 때 유용하게 사용되지만 값이 변할 때, state가 바뀔 때마다 리렌더링되면서 값이 초기화되는 특징이 있다.
Ref에 값을 저장하면 값이 변경되어도 컴포넌트에서 리렌더링이 되지않기 때문에
State를 사용할 때, 값이 변경될 때마다 반복되던 렌더링을 막을 수 있다.
<사용 예제>
useRef는 대게 회원가입 페이지처럼 input을 사용하는 창에서 주로 사용된다.
input을 사용하는 페이지가 그려지면 자동으로 커서를 input에 focus해주는 기능으로 사용할 수 있다.
비밀번호를 입력하는 input에 자동으로 커서를 focus해주는 코드이다.
react 공식문서에서 useRef의 정의를 보면..
useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.
반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다.
따라서 위의 코드에서 보이는 current는 현재 가리키는 특정 DOM의 기능이나 값을 사용하기위해 같이 적어주어야한다.
