useRef

Dom을 직접 건드려야하는 상황이 온다면 이럴때 사용할수있는것이 바로 useRef라는 Hook함수이다.

useRef로 DOM노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할수있다.
이 주소값은 컴포넌트가 리렌더링 되더라도 바뀌지 않는다.

 

useRef를 통해 값을 저장시 리렌더링후 값이 초기화가 되지 않습니다. 따라서 렌더링 여부에 상관없이 값을 유지하고 싶을때 사용되기도 합니다.

 

useRef를 남용하는 것은 부적절하고, React의 선언형 프로그래밍 원칙과 배치된다.

 

const 주소값을 담는 그릇 = useRef(참조자료형)
return (
<div>
<input ref={주소값을 담는그릇} type="text" />
</div>);

//버튼 클릭시 input요소에 focus가 되도록 하려고 합니다.

import React, { useRef } from 'react';

function TextInputWithFocusButton(){
  const inputRef = useRef(null);
  const onButtonClick = () => {
  inputRef.current.focus();
  };
  
  return(
  <>
  <input ref={inputRef} type="text" />
  <button onClick={onButtonClick}>Focus the input</button>
  </>);
  }