[Hook] useRef

useRef

리액트 제공 훅 중 하나로 DOM 요소에 접근하거나 값을 기억하고 추적하는 용도로 사용

주로 두 가지 용도로 사용된다.

1. DOM 요소에 직접 접근
   • 포커스 설정이나 특정 DOM 요소의 크기나 위치 읽는 경우
2. 값을 저장
   • useRef는 컴포넌트가 리렌더링될 때도 값을 기억할 수 있다. 그러나 상태(state)와는 달리, 값이 변경되더라도 컴포넌트를 다시 렌더링하지 않는다. 따라서 렌더링과 관련 없는 값을 저장 시 유용

useRef 훅 사용법

useRef는 초기값을 인수로 받아 current 속성을 가진 객체 반환

이 current 속성에 값을 저장할 수 있으며, 이 값은 컴포넌트가 리렌더링되더라도 유지됨

DOM에 접근하는 예시

import React, { useRef } from 'react';

function ScrollToTopButton() {
  const divRef = useRef(null);

  const scrollToTop = () => {
    divRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <>
      <div ref={divRef} style={{ height: '150vh', backgroundColor: '#f5f5f5' }}>
        Scroll to see the button
      </div>
      <button onClick={scrollToTop}>Scroll to top</button>
    </>
  );
}

설명:

• divRef는 useRef(null)을 통해 div 요소에 대한 참조를 저장합니다.
• 버튼을 클릭하면 divRef.current.scrollIntoView를 호출하여, div 요소로 스크롤을 이동시킵니다.

4. 값을 저장하는 용도로 useRef 사용하기

useRef는 DOM 참조뿐만 아니라 렌더링과 상관없는 값을 저장할 때도 유용합니다. 상태와 달리 useRef로 저장된 값은 컴포넌트가 다시 렌더링되어도 유지되며, 값을 수정해도 재렌더링이 발생하지 않습니다.

값 저장 예시: 이전 상태 추적

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

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();// 이전 상태를 저장할 ref

  useEffect(() => {
    prevCountRef.current = count;// 매 렌더링 시 현재 count를 저장
  }, [count]);// count가 변경될 때마다 실행
  
  return (
    <div>
      <p>Current count: {count}</p>
      <p>Previous count: {prevCountRef.current}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

설명:

• prevCountRef.current는 현재 렌더링된 count 값을 이전 렌더링 시점의 값으로 저장합니다.
• useEffect에서 count가 변경될 때마다 이전 값을 저장하므로, 이전 count 값을 화면에 표시할 수 있습니다.

---

useRef와 상태(state)의 차이점

<상태(state)>

• 컴포넌트의 상태는 값이 변경되면 컴포넌트를 리렌더링합니다.
• 주로 UI 렌더링에 직접적인 영향을 미치는 값을 저장할 때 사용합니다.

<useRef>

• useRef로 저장된 값은 렌더링에 영향을 주지 않으며, 값이 변경되어도 리렌더링되지 않습니다.
• 주로 렌더링과 관련 없는 값을 저장하거나, DOM 요소에 접근하는 데 사용합니다.