useRef

useRef란?

useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다.

useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있다.

좀 더 쉽게 말하자면, ref는 는 변경 가능한 값을 담고 있는 상자로서, 객체입니다. 이때 ref 객체 안의 값은 React의 생명주기에 독립적 즉, re-render와 상관 없이 유지되는 값 입니다. 값이 변경되더라도 render를 발생시키지 않고, render 되더라도 값이 유지되는 특징을 가집니다!

특징

1️⃣ 변화는 감지하지만 렌더링 발생 X ➡️ 성능향상 (state는 변화시, 재렌더링됨)

2️⃣ DOM요소에 손쉽게 접근 (ref속성 사용)

3️⃣ 전생애주기를 통해 유지 (언마운트 되기전까지는 값을 계속 기억함)

이 사이트에 가보면 useref 사용에 대한 예시를 직접적으로 확인해볼수 있어 이해에 용이하다.
https://velog.io/@jinyoung985/React-useRef%EB%9E%80

사용예시

const InputRef = () => {
  const inputRef = useRef(null);
  const onFocus = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={onFocus}>inputFocus</button>
    </>
  );
}

input이 inputRef를 참조하게 된다
inputRef.current에 input 태그에 해당하는 DOM이 담기게 됩니다.(DOM 또한 객체입니다!)