[기술면접준비] useRef가 무엇이고 필요한 상황

useRef는 React에서 참조(ref)를 생성하고 관리하기 위한 React Hook중 하나입니다. useRef를 사용하면 컴포넌트 내부에서 생성한 변수나 DOM 요소에 대한 참조를 생성하고, 이를 다른 곳에서 사용할 수 있습니다.

useRef는 DOM 요소에 직접 접근할 때 사용할 수도 있지만, 그 외에도 여러 상황에서 유용합니다. useRef를 사용하여 생성한 참조는 컴포넌트가 리렌더링될 때마다 새로 생성되지 않으며, 기존에 생성한 참조를 그대로 유지합니다.

useRef를 사용하는 상황으로는 다음과 같은 것들이 있습니다.

1. DOM 요소에 직접 접근해야 하는 경우
 예를 들어, 특정 DOM 요소의 크기나 위치를 측정하거나, 입력 폼의 값을 가져오거나, 스크롤 위치를 제어하는 등의 작업을 할 때 사용합니다.

2. 컴포넌트 내부에서 생성한 변수나 객체를 관리해야 하는 경우
 예를 들어, 특정 상태 값을 저장하고 유지하거나, 이전 값과 새로운 값을 비교해야 하는 경우에 사용합니다.

3. 다른 Hook에서 사용하기 위해 참조를 전달해야 하는 경우
 예를 들어, useEffect Hook에서 생성한 함수에서 참조할 변수를 전달하기 위해 사용합니다.

 

 

 

 

아래는 자세한 코드와 더불어 useRef를 사용할때의 예시를 표현했습니다.

 

 

 

1. DOM 요소에 대한 참조 관리

useRef는 DOM 요소에 대한 참조를 저장하고 추적하는 데 사용됩니다. 예를 들어, 모달 창이나 드롭다운 메뉴 등의 컴포넌트가 있는 경우, 이러한 컴포넌트를 열고 닫을 때 useRef를 사용하여 해당 요소에 대한 참조를 저장할 수 있습니다.

import { useRef } from 'react';

function Modal() {
  const modalRef = useRef(null);

  function handleClick() {
    modalRef.current.classList.toggle('active');
  }

  return (
    <div>
      <button onClick={handleClick}>Toggle Modal</button>
      <div className="modal" ref={modalRef}>
        <p>Modal content</p>
      </div>
    </div>
  );
}

 

2. 이전 값 저장

useRef는 컴포넌트가 렌더링될 때 이전 값을 저장하는 데 사용됩니다. 이전 값을 저장하면 컴포넌트에서 상태 변화에 따라 실행되어야 하는 동작을 처리할 수 있습니다.

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

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

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

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

3. 컴포넌트 내부에서 변수 저장

useRef는 컴포넌트 내부에서 변수를 저장하는 데 사용됩니다. 이러한 변수는 상태(state)와 다르게 업데이트가 발생해도 컴포넌트가 다시 렌더링되지 않습니다.

import { useRef } from 'react';

function Component() {
  const dataRef = useRef([]);

  function handleAdd() {
    dataRef.current.push('New Data');
    console.log(dataRef.current);
  }

  return (
    <div>
      <button onClick={handleAdd}>Add Data</button>
    </div>
  );
}

 

4. 외부 라이브러리와 연동

useRef는 외부 라이브러리와 연동할 때 사용됩니다. 예를 들어, D3.js와 같은 라이브러리는 일반적으로 DOM 요소를 직접 조작하는데, 이를 위해서는 해당 DOM 요소에 대한 참조가 필요합니다.

import { useRef, useEffect } from 'react';
import * as d3 from 'd3';

function Chart() {
  const chartRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(chartRef.current);
    // D3.js를 사용하여 차트를 그리는 코드 작성
  }, []);

  return <div ref={chartRef}></div>;
}