useRef가 필요한 상황

면접에서 “useRef가 필요한 상황을 예시를 들어 설명해 주세요.”라는 질문이 자주 나옵니다. 개념부터 대표적인 사용 상황까지 정리해 보겠습니다.

useRef란?

useRef는 React의 훅 중 하나로, 일반적으로 컴포넌트에서 참조를 유지하기 위해 사용됩니다. 참조는 보통 DOM 요소에 직접 액세스하는 데 사용되지만, useRef를 사용하면 컴포넌트에서 다른 데이터를 유지하거나 업데이트하는 데에도 활용할 수 있습니다.

---

필요한 상황

1. DOM 요소에 접근

useRef는 DOM 요소에 직접 접근하는 데 사용될 수 있습니다. 예를 들어 특정 버튼을 클릭할 때 입력 요소로 포커스를 이동하는 경우, useRef로 해당 입력 요소를 참조하고 버튼 클릭 시 focus 메서드를 호출할 수 있습니다.

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>포커스 이동</button>
    </div>
  );
}

2. 컴포넌트 내부의 값 유지

useRef를 사용하여 컴포넌트 내부에서 값이 유지되도록 할 수 있습니다. 이 값은 컴포넌트가 다시 렌더링되어도 초기화되지 않습니다. 예를 들어 특정 이벤트가 발생할 때마다 값을 업데이트하고, 그 값을 렌더링 로직에서 사용할 때 useRef를 사용할 수 있습니다.

import React, { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const previousCountRef = useRef(0);

  useEffect(() => {
    previousCountRef.current = count;
  }, [count]);

  return (
    <div>
      <p>이전 카운트: {previousCountRef.current}</p>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

위 예시에서 previousCountRef는 useRef로 이전 카운트 값을 유지합니다. useEffect로 count가 변경될 때마다 previousCountRef.current를 업데이트하여 이전 카운트 값을 보관할 수 있습니다.

useRef의 값(.current)을 변경해도 리렌더링이 발생하지 않습니다. 화면에 즉시 반영되어야 하는 값이라면 state를, 렌더링과 무관하게 유지만 하면 되는 값이라면 useRef를 사용합니다.

3. 외부 라이브러리와의 통합

외부 라이브러리가 React의 라이프사이클과 연동하는 경우, useRef를 사용하여 라이브러리 인스턴스를 유지할 수 있습니다. 이는 컴포넌트가 다시 렌더링되더라도 인스턴스를 다시 생성하지 않고 사용할 수 있게 해줍니다.

import React, { useEffect, useRef } from 'react';
import SomeExternalLibrary from 'some-external-library';

function MyComponent() {
  const libraryInstanceRef = useRef(null);

  useEffect(() => {
    if (!libraryInstanceRef.current) {
      libraryInstanceRef.current = new SomeExternalLibrary();
      // 외부 라이브러리 인스턴스 초기화
    }

    // 컴포넌트가 언마운트될 때 라이브러리 정리 로직
    return () => {
      libraryInstanceRef.current.cleanup();
    };
  }, []);

  // 라이브러리 인스턴스를 사용한 나머지 로직...

  return <div>Some content</div>;
}

libraryInstanceRef로 외부 라이브러리의 인스턴스를 참조·유지하고, useEffect로 처음 렌더링될 때 한 번만 초기화한 뒤 언마운트 시 정리 로직을 실행할 수 있습니다.

---

한 줄 요약

useRef는 리렌더링을 유발하지 않으면서 값을 유지하거나 DOM 요소에 직접 접근할 때 사용합니다. 대표적으로 ① DOM 포커스 등 요소 제어, ② 렌더링과 무관한 값 보관, ③ 외부 라이브러리 인스턴스 유지에 활용됩니다.