useRef

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

자식 컴포넌트를 부모 컴포넌트에서 접근해야할 일이 생길때 활용하게 되는 리액트의 요소이다. 

useRef는 React Hooks API의 하나로, 함수형 컴포넌트 내에서 DOM 요소나 React 요소에 접근하거나 조작하는 데 사용된다.

이를 통해 컴포넌트의 렌더링과 관련 없이 요소에 접근하고 조작할 수 있다.

우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 다양한 상황이 있다.

추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있다.

그럴 땐, 리액트에서 ref 라는 것을 사용한다. 원하는 위치에 ref={} 의 형태로 작성하면 된다.

함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용한다.

 

 

1. DOM 요소에 접근

컴포넌트 내에서 특정 DOM 요소에 접근하고 싶을 때, useRef를 사용하여 해당 요소를 참조한다.

예를 들어, 특정 요소의 크기나 위치를 얻거나 조작할 때 사용할 수 있다.

2. React 요소에 접근

useRef는 React 요소에도 사용될 수 있다.

예를 들어, 클래스 컴포넌트의 this와 유사한 방식으로 함수형 컴포넌트 내에서 상태나 메서드를 참조하고 사용할 수 있다.

3. 이전 값 저장

useRef는 컴포넌트 렌더링 사이클 간 값의 변경 여부를 추적하는 데 사용될 수 있다.

이전 값과 현재 값을 비교하거나, 렌더링 사이클 간에 변경되지 않는 값을 저장하는 데 유용하다. 

 

import { useState, useRef } from 'react';

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);

  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());

    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }

  return (
    <>
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}>
        Start
      </button>
      <button onClick={handleStop}>
        Stop
      </button>
    </>
  );
}

 

 

https://react.dev/reference/react/useRef

useRef – React

https://react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook