React(7) ≡ useRef

useRef

useRef는 간단하게 생각하면 렌더링될 때도 값이 변하지 않게 해 주는 함수입니다.
물론 use~ 이렇게 돼 있는 건 react에 있겠죠. 그래서 다음과 같이 선언합니다.

import { useRef } from "react";

let, var과 같은 변수처럼 item += 1 이런 식으로는 덧셈을 못하고
item.current += 1 이렇게 쓰셔야 합니다.

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

function App() {
  const item = useRef(0);

  const increaseItem = () => {
    item.current += 1
    console.log(item)
  };

  return (
    <div>
      <p>useRef: {item.current}</p>
      <button onClick={increaseItem}>useRef</button>
    </div>
  );
}

export default App;

위 코드에서 버튼을 누르면 item의 값이 증가하는데 화면에는 값이 변하지 않습니다.
useState 값이 변하면 렌더링해 주던 반면 useRef에는 그런 기능이 없는 것이죠.

let(var), useRef, useState

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

function App() {
  let item = 0;
  const item2 = useRef(0);
  const [item3, changeItem] = useState(0);

  const increaseItem = () => {
    item += 1
    console.log(item)
  };

  const increaseItem2 = () => {
    item2.current += 1
    console.log(item2)
  };

  const increaseItem3 = () => {
    changeItem((item3) => item3 + 1);
  };

  return (
    <div>
      <p>let: {item}</p>
      <p>useRef: {item2.current}</p>
      <p>useState: {item3}</p>
      <button onClick={increaseItem}>let</button>
      <button onClick={increaseItem2}>useRef</button>
      <button onClick={increaseItem3}>useState</button>
    </div>
  );
}

export default App;

위 코드에서 let, useRef 버튼을 누르시면 let, useRef 값이 console로 보면 증가하는 것을 보실 수 있는데, 화면에는 변하지 않는 것을 보실 수 있습니다.

useState 버튼을 누르시면 렌더링되니 useRef의 값이 보이게 됩니다.

반면, let은 렌더링하면 0으로 초기화된 것을 보실 수 있습니다. 상단에 정의한 초깃값으로 돌아온 것이죠.