useRef가 필요한 상황

useRef는 useState와 비슷하지만, useState는 상태가 변경될 때마다 컴포넌트를 리렌더링하지만, useRef는 값이 변경되더라도 컴포넌트를 리렌더링하지 않습니다. useRef는 DOM 요소에 대한 참조를 얻거나, 시간이 지나도 변경되지 않는 값을 저장할 때 유용합니다.

import React, { useRef } from "react";

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

  return (
    <div>
      <p>현재 카운트: {counterRef.current}</p>
      <button onClick={() => {
        counterRef.current++;
      }}>카운트 증가</button>
    </div>
  );
}

export default App;

inputRef는 DOM 요소에 대한 참조를 저장합니다. inputRef.current를 사용하여 DOM 요소에 직접 접근할 수 있습니다. 또한, useRef를 사용하여 시간이 지나도 변경되지 않는 값을 저장할 수 있습니다.

 

Q: useRef 대신 useState를 사용할 경우 어떤 문제가 발생할 수 있나요?
A: useState는 상태가 변경될 때마다 컴포넌트를 리렌더링합니다. 시간이 지나도 변경되지 않는 값을 저장하는 경우나, DOM 요소에 접근하는 경우에 useState를 사용하면 필요하지 않은 리렌더링이 발생할 수 있습니다. 이런 상황에서는 useRef를 적합합니다.