useRef 는 돔을 선택할때도 사용할수 있지만,

돔을 선택하는 것이 아닌 ref에 초기값을 넣어주고 이 초기값을 업데이트 해줘도 useState와

다르게 리렌더링이 발생하지 않습니다.

import { useEffect, useState } from "react";

function App() {
  const [isMount, setIsMount] = useState(false);

  useEffect(() => {
    if (!isMount) {
      setIsMount(true);
    }
  }, [isMount]);

  return (
    <>
      <div>{isMount && "안녕"}</div>
    </>
  );
}

export default App;

위 코드는 화면이 mount 되고나서 “안녕”을 출력하는 로직입니다. useState로 값을 체크하여

setState 로직이 들어가면서 화면의 렌더링이 추가적으로 발생하게 됩니다.

import { useEffect, useRef } from "react";

function App() {
  const ref = useRef(false);

  useEffect(() => {
    ref.current = true;

    return () => (ref.current = false);
  }, []);

  return (
    <>
      <div>{ref.current && "안녕"}</div>
    </>
  );
}

export default App;

따라서 useState가 아닌 useRef를 사용하여 ref 값을 바꿔서 화면의 추가 렌더링이 발생하지

않게 사용할수 있습니다.

요약 : useState 대신 useRef를 사용하면 컴포넌트의 생명주기와 동일한

리렌더링되지 않는 상태를 만들 수 있다.