React | useRef

변수처럼 값이 변해도 렌더링은 안되지만

렌더링 된 이후에도 값을 저장하고 있음

 

그래서 렌더링이되면 변수는 값이 초기화 되지만

useRef는 화면상에서 값이 유지됨!

 

예를들어 아래와 같은 코드가 있다고 가정

import "./App.css";
import { useState, useRef } from "react";

function App() {
  const [renderer, setRenderer] = useState(0);
  const countRef = useRef(0);
  let countVar = 0;

  const doRendering = () => {
    setRenderer(renderer + 1);
  };
  const increseRef = () => {
    countRef.current = countRef.current + 1;
    console.log("ref: ", countRef.current);
  };

  const increaseVar = () => {
    countVar = countVar + 1;
    console.log("var: ", countVar);
  };

  return (
    <div className="App">
      <p>Ref: {countRef.currnet}</p>
      <p>Var: {countVar}</p>
      <button onClick={doRendering}>렌더</button>
      <button onClick={increseRef}>Ref 올려</button>
      <button onClick={increaseVar}>Var 올려</button>
    </div>
  );
}

export default App;

둘다 클릭해도 화면은 렌더링 안되지만

렌더링을 하게되면

값을 기억하고있다가 뿅하고 출력해준다

 

하지만 변수는 다시 초기화가 됨

 

컴포넌트가 렌더링된다는것은

 

컴포넌트를 나타내는 함수가 다시 불린다는 것

 

함수가 불리면 불릴때 마다 

 

함수내부에 있는 변수들이 다시 초기화가 된다

 

즉, 함수가 불릴때마다 countVar가 0으로 계속 초기화 된다는 것이다

 

하지만 useRef는 다르다!

 

useRef는 아무리 컴포넌트가 렌더링 되더라도 값을 유지한다

 

ref의 값은 컴포넌트의 전 생애주기를 통해 유지가 되기 때문이다

 

그래서 컴포넌트가 브라우저에 마운팅 된 시점부터 해제 될때까지 같은 값을 계속해서 유지될수 있는것.