[React] ref는 단순히 DOM 조작 용도가 아닙니다

[참고: Referencing Values with Refs]

Referencing Values with Refs – React

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.

 

React에서 `ref`에 대해서 학습할 때, 보통 직접적인 DOM 조작을 위해서 사용한다고 배웁니다.

물론 맞는 말입니다. 하지만 React 팀에서는 그 용도보다 강조하는 용도가 존재합니다

상태를 저장하고 싶지만, 해당 상태가 렌더링 흐름에 관여되게 하고 싶지 않을 때 `ref`를 사용

하라고 말합니다.

 

상태를 저장하지만 렌더링 흐름에 관여되지 않는다는게 무슨 뜻일까요?

솔직히 위의 문장은 예제가 존재하지 않으면 잘 이해가 가질 않습니다.

 

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

위의 예제는 버튼을 누를 때마다 `alert`창을 띄우고, 해당 `alert`창에 표시되는 카운트를 하나씩 올리는 간단한 예제입니다.

위의 예제에서는 `ref`를 통해 카운트를 업데이트하고 있지만, 만약 이게 리액트 state였다고 가정해봅시다.

그러면 버튼을 누를 때마다 재렌더링이 트리거될것입니다.

 

이는 매우매우매우 이상합니다. `alert`은 분명 리액트 컴포넌트 렌더링 흐름과 관련이 없습니다. (브라우저 기능)

하지만 일반적으로 리액트를 이용할 때 상태 사용하면 이러한 문제가 발생할것입니다.

 

리액트 팀은 이를 인지하고 있었고, 이를 위한 탈출구를 만들어 놨습니다. 바로 `ref`입니다

앞서 언급했듯이 `ref`는 리액트 렌더링 흐름에 관여되지 않는다고 했습니다.

이는 두가지 의미가 존재합니다.

1. ref를 통해 값을 변경해도 재렌더링 트리거 되지 않습니다.

2. 재렌더링은 ref의 상태에 영향을 주지 않습니다.

 

이를 자세히 살펴보기 위해 비슷한 예제를 보겠습니다.

import { useState, useRef } from 'react';

export default function Counter() {
  const [stateCount, setStateCount] = useState(0);
  const refCount = useRef(0);

  function handleStateClick() {
    setStateCount(prevCount => prevCount + 1);
  }

  function handleRefClick() {
    refCount.current = refCount.current + 1;
    alert('Ref count is now: ' + refCount.current);
  }

  return (
    <div>
      <p>State Count (재렌더링 발생): {stateCount}</p>
      <p>Ref Count (재렌더링 간 유지됨): {refCount.current}</p>
      <button onClick={handleStateClick}>State Count 증가</button>
      <button onClick={handleRefClick}>Ref Count 증가</button>
    </div>
  );
}

`ref`와 `state`를 이용하여 카운트를 업데이트하는 간단한 컴포넌트입니다.

 

1. State 카운트

• "State Count 증가" 버튼을 클릭하면 handleStateClick 함수가 호출되고, setStateCount를 통해 상태가 업데이트됩니다.
• 상태 업데이트는 컴포넌트의 재렌더링을 트리거합니다.
• 재렌더링 후, 새로운 stateCount 값이 화면에 표시됩니다.

2. ref 카운트

• "Ref Count 증가" 버튼을 클릭하면 handleRefClick 함수가 호출되고, refCount.current가 증가합니다.
• refCount.current를 업데이트해도 재렌더링은 발생하지 않습니다.
• 따라서 즉시 화면의 Ref Count 값은 변하지 않습니다.
• 그러나 컴포넌트가 다른 이유로 재렌더링되면, refCount.current의 최신 값이 표시됩니다.
•  

이 예제로 위의 두 특징을 확인 할 수 있습니다.

1. refCount.current의 값은 재렌더링 간에도 유지됩니다.

2. 이를 업데이트해도 재렌더링을 일으키지 않습니다

 

이를 통해 ref를 사용하면 상태를 저장하면서도 렌더링 흐름에 관여하지 않게 할 수 있다는 것을 알 수 있습니다. 즉, ref는 값이 변경되어도 컴포넌트를 재렌더링하지 않으며, 재렌더링이 발생해도 ref에 저장된 값은 그대로 유지됩니다.

이러한 특성은 상태가 UI와 직접적인 연관이 없는 경우나 렌더링과 무관하게 값을 유지해야 하는 경우에 매우 유용합니다