useRef로 DOM 요소 참조 및 관리하기

최근에 개인 프로젝트로 유튜브 클론 코딩을 진행하면서 무한 스크롤 기능을 추가하고 싶었습니다.

검색을 통해 다양한 무한 스크롤을 구현한 코드를 살펴본 결과, 대부분의 코드에서 IntersectionObserver와 useRef를 활용한 방식을 사용하고 있었습니다.

이번 포스팅에서는 useRef에 대해 작성해보도록 하겠습니다.

1. useRef란?

useRef는 리액트(React)에서 제공하는 훅으로, 다음과 같은 역할을 합니다

• DOM 요소 참조: useRef를 사용하면 특정 DOM 요소를 직접 참조할 수 있습니다.
• 값 유지: 컴포넌트가 리렌더링되더라도 useRef로 저장한 값은 초기화되지 않고 유지됩니다. 이는 state와 달리 값이 변경되더라도 컴포넌트를 리렌더링하지 않기 때문에 불필요한 렌더링을 방지할 수 있습니다.
• 값 변경 추적: useRef는 state처럼 변경을 추적하지 않으므로, 값이 즉시 업데이트되더라도 리렌더링이 발생하지 않습니다. 이는 특정 값의 변경을 컴포넌트의 렌더링에 영향을 주지 않고 관리할 때 유용합니다.

2. useRef 기본 사용법

다음은 useRef의 간단한 사용 예시입니다. 이 예제는 버튼을 클릭하면 input 요소에 포커스를 맞추는 동작을 보여줍니다.

import React, { useRef } from 'react';

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

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

  const handleBlur = () => {
    inputRef.current.blur();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="포커스를 맞추세요" />
      <button onClick={handleFocus}>포커스 맞추기</button>
      <button onClick={handleBlur}>포커스 해제</button>
    </div>
  );
}

export default FocusInput;

• useRef(null): useRef를 호출할 때 null을 초기값으로 전달합니다. 이는 해당 참조가 아직 DOM 요소에 연결되지 않았음을 의미합니다.
• inputRef.current: useRef로 생성된 inputRef 객체의 current 속성은 현재 참조하고 있는 DOM 요소를 나타냅니다. 이 current 속성을 통해 우리는 DOM 요소에 접근할 수 있습니다.

3. 자식 컴포넌트에서 ref를 전달받아 사용하기 (forwardRef)

리액트에서 ref를 자식 컴포넌트에 전달하여 그 컴포넌트 내부의 DOM 요소에 접근하고자 할 때, forwardRef가 필요합니다.

forwardRef는 부모 컴포넌트로부터 전달된 ref를 자식 컴포넌트의 특정 DOM 요소에 연결할 수 있도록 해줍니다.

import React, { forwardRef } from 'react';

const Example = forwardRef((props, ref) => (
  <input ref={ref} type="text" placeholder="포커스를 맞추세요" />
));

export default Example;

4. 무한 스크롤에 사용될 useRef

무한 스크롤을 구현할 때, 로딩 지점이 되는 특정 DOM 요소(예: 페이지의 하단)를 useRef로 참조하게 됩니다.

그런 다음, 이 참조된 요소를 IntersectionObserver와 결합하여, 해당 요소가 화면에 나타날 때마다 새로운 데이터를 불러오는 방식으로 무한 스크롤을 구현할 수 있습니다.

이 과정에서 useRef는 관찰 대상인 DOM 요소를 정확히 참조하는 데 중요한 역할을 합니다.

IntersectionObserver는 useRef.current로 참조된 요소가 뷰포트에 들어오거나 나가는 시점을 감지하여, 그에 맞춰 데이터를 로드하는 트리거로 설정할 수 있게 됩니다.