useRef

useRef

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

일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우이다.

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

useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있으며

일반적으로 리액트에서는 DOM을 선택할 때 ref를 사용하는게 익숙하다.
<div ref={myRef} />를사용하여 React로 ref 객체를 전달한다면, React에서는 새로운 값을 불러올 때 마해당Dom의 .current를 프로퍼티를 설정할 것이다.

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

export default function CounterPage() {
  const router = useRouter();

  const inputRef = useRef<HTMLInputElement>(null);
  const [count, setCount] = useState(99);

  useEffect(() => {
    console.log("마운트됨");
    inputRef.current?.focus();

    return () => {
      console.log("컴포넌트 사라짐!!!");
    };
  }, []);

  const onClickCounter = () => {
    setCount((prev) => prev + 1);
  };

  const onClickMove = () => {
    router.push("/");
  };

  console.log("나는 언제 실행되게???");
  return (
    <div>
      <input type="text" ref={inputRef} />
      <div>현재카운트{count}</div>
      <button onClick={onClickCounter}>카운트 올리기!!!</button>
      <button onClick={onClickMove}>나가기!!!</button>
    </div>
  );
}

그렇지만, ref 속성보다 useRef()가 더 유용하게 사용될 수 있다.

이것은 useRef()가 순수 자바스크립트 객체를 생성하기 때문입니다. useRef()와 {current: ...} 객체 자체를 생성하는 것의 유일한 차이점이라면 useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것이다.

useRef는 내용이 변경될 때 그것을 알려주지는 않는다 .current 프로퍼티를 변형이 리랜더링을 발동시키지 않으며, React가 DOM을 선택해 ref를 attach하거나 detach할 때 다른 코드가 필요하다면 콜백 ref를 사용한다.