안타깝게도 useRef는 과소평가되었습니다. 가장 인기 있는 후크는 아니지만 유익합니다. 어떻게, 어디에 사용하는지 알면 훌륭한 결과를 얻을 수 있습니다.

기본부터 시작해보자

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 React Hook입니다.

React는 DOM의 노드를 참조하는 JavaScript 객체를 만들거나 간단한 값을 만드는 경우 useRef를 통해 생성한 값을 기억하며 다시 렌더링하는 동안 손실되지 않습니다.

그것은 우리에게 무엇을 주는가?

1. DOM 요소에 액세스:

   • DOM의 요소에 쉽게 접근할 수 있습니다. 예를 들어 입력 필드의 값을 가져오고, 특정 요소에 초점을 맞추고, 높이와 너비를 가져오고, 화면의 특정 부분으로 스크롤하는 등의 작업을 수행할 수 있습니다.

2. 변경 가능한 값 저장:

   • 구성요소를 다시 렌더링하지 않고도 필요한 모든 데이터를 기억할 수 있습니다. 예를 들어 카운터나 타이머가 필요한 경우 useState 대신 useRef를 선택하세요.

예

다음은 사용의 힘을 보여주는 몇 가지 예입니다.

예 1: 숫자 참조

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      
    >
  );
};

export default Counter;

이 예에서는:

• refCount는 숫자에 대한 변경 가능한 참조입니다.
• refInputField는 입력 요소에 대한 참조입니다.
• 버튼을 클릭하면 카운터가 증가하고 입력 필드에 초점이 맞춰집니다.

예 2: 이전 값 추적

useRef의 또 다른 일반적인 사용 사례는 이전 값을 추적하는 것입니다.

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

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

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

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

이 예에서는:

• prevCountRef는 count의 이전 값을 추적합니다.
• useEffect 후크는 개수가 변경될 때마다 prevCountRef.current를 업데이트합니다.
• 이를 통해 불필요한 재렌더링을 유발하지 않고 현재 및 이전 카운트를 모두 표시할 수 있습니다.

useRef를 사용한 고급 팁과 요령

1. 렌더 전반에 걸쳐 값 유지

useRef는 useState와 달리 다시 렌더링하지 않고 렌더링 간에 값을 유지하는 데 사용할 수 있습니다. 이는 UI에 직접적인 영향을 주지 않지만 기억해야 하는 값을 저장하는 데 특히 유용합니다.

예: 구성 요소의 렌더링 횟수 추적

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

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current  = 1;
  });

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. 타사 라이브러리와 통합

useRef는 차트 라이브러리 통합, 비디오 플레이어 관리, 애니메이션 처리 등 DOM 요소를 직접 조작해야 하는 타사 라이브러리로 작업할 때 매우 유용합니다.

예: 차트 라이브러리 통합.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. 복잡한 애플리케이션에서 불필요한 재렌더링 방지

성능이 중요한 복잡한 애플리케이션에서는 useRef를 사용하여 변경 가능한 객체를 저장하면 불필요한 재렌더링을 방지하는 데 도움이 될 수 있습니다.

예: 변경 가능한 상태 객체 저장

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. 폐쇄 문제 방지

useRef를 사용하면 렌더링 전반에 걸쳐 지속되는 값에 대한 안정적인 참조를 제공하여 클로저 문제를 방지하는 데 도움이 될 수 있습니다.

예: 오래된 상태를 방지하기 위해 useRef가 포함된 타이머.

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

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

결론

후크는 훌륭하므로 사용해야 합니다. React의 작동 방식을 이해하고 Hooks를 올바르게 적용한다면 많은 것을 얻을 수 있습니다. useRef는 특히 다음과 같은 경우에 강력합니다.

• DOM 요소에 액세스하고 조작합니다.
• 다시 렌더링을 트리거하지 않는 변경 가능한 값을 저장합니다.
• 렌더링 전반에 걸쳐 값을 유지합니다.
• 타사 라이브러리와 통합.
• 복잡한 애플리케이션에서 불필요한 다시 렌더링을 방지합니다.
• 폐쇄 문제를 완화합니다.

useRef를 이해하고 활용하면 보다 효율적이고 효과적인 React 컴포넌트를 작성할 수 있습니다. 후크의 진정한 힘은 후크의 동작을 이해하고 현명하게 적용하는 데 있습니다.

useState가 항상 정답은 아니라는 사실을 알고 계시나요?