useState , useRef 의 차이

우리는 react에서 상태를 기억하고 상태를 동적으로 변경하기 위해 useState를 사용한다.

useState는 우리가 초기값으로 전달해준 값이 바뀌게 되면 리랜더링 되는것을 모두 알고있을 것이다.

하지만 useRef도 값을 저장하고 Dom요소처럼 사용도 할 수 있는데 두 훅의 차이점은 무엇일까?

state에 변화가 일어나면? - 랜더링이 된다. - 컴포넌트 내부 변수들의 초기화가 이루어진다. (스테이트의 변화)

ref의 변화가 일어나면? - 랜더링이 되지 않는다. - 변수들의 값이 유지된다.

카운터를 만들어 보면 재미있는 일이 일어난다 ,

아래는 useState , useRef hook을 사용해 만들어낸 카운트 예제이다.

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

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

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

  const increaseRef = () => {
    countRef.current = countRef.current + 1;
  };

  return (
    <div className="App">
      <div>
        <span>State:{count}</span>
        <button onClick={increaseState}>state Up</button>
      </div>
      <div>
        <span>Ref:{countRef.current}</span>
        <button onClick={increaseRef}>Ref Up</button>
      </div>
    </div>
  );
}

export default App;

위 코드를 보면 state up 이라는 버튼을 누르면 즉시 useState의 상태가 변경되므로 리랜더링이 일어난다.

하지만 ref는 값이 변경되어도 리랜더링 되지 않고 0 을 유지한다.

정말 0인 값으로 남아있을까? 아니다 내부적으로 올라가고 있지만 리랜더링만 되지 않는것이다.

이 상황에서 ref의 값을 랜더링 시키려면 상태를 변경시키면 될 것이다.

다시 한 번 state up 버튼을 눌러 리랜더링을 시키게 되면 ref의 값은 올라가있다.

변수와 ref의 상관관계는 어떨까?

let counter = 0 으로 할당해

const counterIncrease = ()=> { counter = counter +1}라는 함수를 작성하고 ref를 증가시키면 어떻게 될까?

변수와 ref는 증가를 해도 둘 다 랜더링이 되지않기에 화면속에서의 변화는 없다 .

하지만 스테이트를 만들어 리랜더링을 시키면 어떻게 될까?

ref는 증가하고 변수는 아무리 클릭을해도 0 으로 남아있다 .

이 이유는 간단하다 .

컴포넌트가 리랜더링 된다는 것은 컴포넌트를 나타내는 함수 자체가 다시 불린다는 것이다 .

이 과정에서 함수가 불릴때마다 함수 내부의 변수들은 다 초기화가 되기때문에 console.log()를 찍으면 변수의 값은 올라가도 리랜더링을 시키면 화면에서 계속 0으로 남는것이다.