코린이에서 코른이로 ( useRef )

양선우·2023년 2월 22일

코린이에서 코른이로

목록 보기

20/23

useRef란?

useRef 는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다.

우리가 자바스크립트를 사용 할 때에는, 우리가 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다.

React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴때 우리는 useRef라는 React Hook을 사용한다.

예제를 확인해보자.

useRef 사용 예시 - 변수 관리

(Open Sandbox를 누르거나 왼쪽 바를 땡기면 코드를 확인할 수 있다.)

여기 useState를 사용해 값을 저장한 stateCount, useRef를 사용해 값을 저장한 refCount, 변수를 통해 값을 저장한 varCount가 있다.

ref up 버튼을 누르면 각각의 값이 올라가고 콘솔창에 출력이 되는 형태인데, ref up을 아무리 눌러도 콘솔창에만 출력되고 화면에 렌더링이 되지 않는것을 확인할 수 있다.

하지만 state up 버튼을 누르면 화면이 렌더링되면서 올려놨던 refCount값도 화면에 출력되게 된다. 이를 통해 우리는 useRef로 관리하는 값은 값이 변해도 화면이 렌더링되지 않음을 알 수 있다.

또 var up 버튼을 통해 변숫값을 아무리 높혀놔도 state up 버튼을 통해 렌더링을 한다면, 컴포넌트 내부에 있는 let varCount = 0; 이 계속 실행되기에 값이 초기화된다.

useRef가 유용한 상황은 이런 상황이 있다.
예를 들어 내 컴포넌트가 몇번 렌더링됐는지 알고싶은 상황이라고 해보자.

function App() {
  const [count, setCount] = useState(1);
  const [renderingCount, setRedneringCount] = useState(1);
 
  useEffect(() => {
    console.log("rendering Count : ", renderingCount);
    setRedneringCount(renderingCount + 1);
  });

  return (
    <div>
      <div>Count : {count}</div>
      <button onClick={() => setCount(count + 1)}> count up </button>
    </div>
  );
}

이렇게 로직을 짜면, useEffect 안에있는 setRenderingCount()가 계속해서 컴포넌트를 리렌더링해서 무한 루프에 빠지게 된다.

이를 useRef를 통해 효율적으로 관리할 수 있다.

function App() {
  const [count, setCount] = useState(1);
  const renderingCount = useRef(1);

  useEffect(() => {
    console.log("renderingCount : ", renderingCount.current);
    ++renderingCount.current;
  });

  return (
    <div>
      <div>Count : {count}</div>
      <button onClick={() => setCount(count + 1)}> count up </button>
    </div>
  );
}