useRef란

useRef란 React의 훅 중 하나로, 일반 JavaScript 객체를 생성하여 참조할 수 있는 값을 저장하는데 사용된다. useRef는 컴포넌트의 라이프사이클과 관계없이 일시적인 데이터를 유지하고, DOM 요소에 접근하거나 컴포넌트 내부에서 값의 변경을 추적하는 데 유요하다.

useRef를 사용하면 렌더링 중에도 값이 변경되어도 컴포넌트가 다시 랜더링되지 않는다. 이는 useRef가 반환하는 객체의 current 속성을 통해 값을 읽고 쓸 수 있기 때문이다.

주요 사용 사례

1. DOM 요소에 직접 접근
   useRef를 사용하여 DOM 요소에 접근할 수 있고 해당 요소에 대한 참조를 얻을 수 있다. 이를 통해 DOM 조작, 측정, 포커스 설정 등을 수행할 수 있다.
2. 값의 변경 추적
   useRef를 사용하여 값의 변경을 추적할 수 있다. 컴포넌트가 재 렌더링 되어도 useRef의 current 속성에 저장된 값은 이전 값을 유지한다. 이를 활용하여 이전 값과 현재 값의 비교, 상태 변경의 특정 시점 저장 등을 수행할 수 있다.

예시 1

import { useRef } from 'react';

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

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

예시2

import React, { useRef } from 'react';

function ScrollExample() {
  const scrollRef = useRef(null);

  const scrollToTop = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo(0, 0);
    }
  };

  const scrollToBottom = () => {
    if (scrollRef.current) {
      const { scrollHeight, clientHeight } = scrollRef.current;
      scrollRef.current.scrollTo(0, scrollHeight - clientHeight);
    }
  };

  return (
    <div>
      <button onClick={scrollToTop}>Scroll to Top</button>
      <button onClick={scrollToBottom}>Scroll to Bottom</button>
      <div
        ref={scrollRef}
        style={{ height: '300px', overflow: 'auto' }}
      >
        {/* 여기에 스크롤 가능한 컨텐츠를 추가합니다 */}
      </div>
    </div>
  );
}

export default ScrollExample;