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를 사용하면 컴포넌트의 생명주기와 동일한
리렌더링되지 않는 상태를 만들 수 있다.