[React] Refs

useRef 훅이란?

const ref = useRef(value);
// {current: value} (레퍼런스 객체)

reference를 사용하기 위한 훅으로, 파라미터로 들어온 초기값으로 초기화된 레퍼런스 객체를 반환한다. 리액트에서 reference란 특정 컴포넌트에 접근할 수 있는 객체를 의미한다.

current 프로퍼티에는 현재 참조하고 있는 리액트 엘리먼트를 의미한다.
레퍼런스 객체는 수정이 가능하기 때문에 언제든 원하는 값으로 바꿀수 있다.

ref.current = 'hi';
ref.current = 'hello';

또한 레퍼런스 객체는 컴포넌트의 전 생애주기를 통해 유지가된다. (컴포넌트가 업데이트돼도 언마운트 되기 전까지는 값을 그대로 유지할 수 있다는 뜻이다.)

useRef() 훅은 내부의 데이터가 변경되었을 때 별도로 알리지 않는다. 즉, current 프로퍼티의 값이 변경되어도 컴포넌트 재렌더링이 일어나지 않는다.

useRef()는 대표적으로 두 가지 상황에서 사용이된다.

• state와 비슷하게 어떠한 값을 저장해두는 저장공간으로 사용된다.
  useState의 state 값이 변경되면 컴포넌트 재렌더링이 일어나지만 ref 값은 아무리 변경해도 컴포넌트 재렌더링이 발생하지 않는다.
  불필요한 렌더링을 막을 수 있는 것이다.
  따라서, 변경시 렌더링을 발생시키지 말아야하는 값을 다룰 때 편리하게 사용 된다.
  

• DOM요소에 접근해서 여러가지 일들을 할 수 있다. 예를 들어, input 요소를 클릭하지 않아도 포커스를 줄 수 있고, input 요소의 값을 읽어올 수 있다.
  

변수에 반환되는 레퍼런스 객체를 접근하고자 하는 요소의 ref 속성의 값에 넣어주기만 하면 쉽게 해당 요소에 접근할 수 있다.

const ref = useRef(value);

<input ref={ref} />

function App() {
  const inputRef = useRef();

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

  return (
    <div>
      // inputRef.current 값이 input 태그를 가리킨다.
      <input type="text" placeholder='username' ref={inputRef} />
      <button>로그인</button>
    </div>
  );
}