[React] 4. useRef

앞의 useState 는 동적인 데이터에 대해 update 가 발생하면 렌더링이 발생하는 반면

useRef 의 경우 렌더링 없이 값을 변경한다.

 

단, 화면에 즉각적으로 보여줘야 할 경우 useState ,

값이 변경 되는건 맞지만 화면에 반영하지 않는 내용일 경우 useRef 를 쓴다고 생각하면된다.

 

예를 들어서 화면에는 보이지 않는 키 값이나 boolean 같은걸 저장하는 변수로 쓰기 좋다 . 

 

count 코드를 재사용해서 보게 된다면 

 

import { useRef, useState } from 'react'
import './App.css'
import Input from './components/Input'
function App() {

  const [count, setCount] = useState(1);

  const onClickButton = (value) => {
    setCount(count + value);
  };

  const clickRef = useRef(0);


  return (
    <div>
      <Input onClickButton={onClickButton}/>
    </div>
  )
}

export default App

import { useRef, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); 
  const countRef = useRef(0); 

  const increaseState = () => {
    setCount(count + 1); 
  };

  const increaseRef = () => {
    countRef.current += 1; 
    console.log("ref 값:", countRef.current);
  };

  return (
    <div>
      <h1>State 값: {count}</h1>
      <h1>Ref 값: {countRef.current}</h1>
      <button onClick={increaseState}>State 증가</button>
      <button onClick={increaseRef}>Ref 증가</button>
    </div>
  );
}

export default Counter;

이렇게 코드를 짜게 되면 

 

console.log 에서는 9가 찍히지만 화면에서는 8 이 출력 되는데 

이는 ref는 렌더링을 발생시키지 않기 때문에 실제 값은 9 이지만 화면에는 8로 뜨게 된다.

 

 

그 상태에서 State 증가 버튼을 누르게 되면 렌더링이 발생하며 현재 값 9가 화면에 출력된다 . 

 

렌더링이 굳이 발생 할 필요가 없다면 Ref를 쓰면 된다.