useRef

useRef란?

const refContainer = useRef(initialValue);
//refContainer는 object
{ current: initialvalue}

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다.

언제 쓰는가?

변수 관리

State를 사용하게 되면 State의 값이 변하면 렌더링이 되고, 컴포넌트 내부 변수들이 초기화된다.
반면 Ref는 값이 변해도 렌더링이 일어나지 않으므로 변수들의 값이 유지된다. 또한 State가 변해서 렌더링이 되더라도 Ref의 값은 유지된다.
그러므로 자주 바뀌는 변수를 Ref에 넣어주게 되면 불필요한 렌더링을 막을 수 있다.

DOM 요소 접근

네이버에 처음 들어가면 아래처럼 검색창을 클릭하지도 않았는데 focus가 되어있다. useRef를 사용하면 DOM 요소에 접근 할 수 있다. 접근하고 싶은 요소에 ref속성을 추가해주면 된다.

import React, { useEffect, useRef } from "react";

function Ref() {
  const inputRef = useRef(null);

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

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="username" />
      <button>로그인</button>
    </div>
  );
}

export default Ref;

실행 결과

//input값 접근
const login = () => {
  alert(`환영합니다 ${inputRef.current.value}!`);
}
<input ref={inputRef} type="text" placeholder="username" />
<button onClick={login}>로그인</button>

참고 문헌

https://ko.reactjs.org/docs/hooks-reference.html#useref
https://www.youtube.com/watch?v=VxqZrL4FLz8