React에서는 useRef 훅을 사용하여 DOM 요소를 참조하거나 상태값을 저장할 수 있습니다. 이러한 useRef를 활용하여, Custom Hook을 개발할 수 있습니다. Custom Hook은 React로 개발한 기능이나 로직을 재사용하기 위한 방법입니다.

이번 튜토리얼에서는 useRef를 활용하여 Custom Hook을 개발하는 방법에 대해 알아보겠습니다.

Custom Hook 개요

Custom Hook은 React 컴포넌트에서 사용할 수 있는 로직을 분리하여, 재사용 가능한 함수로 만드는 것입니다. Custom Hook은 use로 시작하는 함수명을 사용하여 작성합니다.

useRef를 사용한 Custom Hook 구현

우선, useRef를 사용하여 DOM 요소를 참조하는 Custom Hook을 구현해보겠습니다. 아래의 예시 코드를 확인해주세요.

import { useRef } from 'react';

const useDOMRef = () => {
  const ref = useRef(null);

  // DOM 요소를 참조하기 위한 함수
  const getRef = () => {
    return ref.current;
  }

  return {
    ref,
    getRef,
  };
};

export default useDOMRef;

위의 코드에서는 useDOMRef라는 Custom Hook을 정의하고, useRef를 사용하여 ref 변수를 생성합니다. ref 변수는 useRef로 생성한 ref 객체입니다. 이 객체를 반환하여 컴포넌트에서 DOM 요소를 참조할 수 있게 합니다.

아래는 해당 Custom Hook을 사용하는 예시입니다.

import React, { useEffect } from 'react';
import useDOMRef from './useDOMRef';

const ExampleComponent = () => {
  const domRef = useDOMRef();

  useEffect(() => {
    const element = domRef.getRef(); // DOM 요소 참조
    // 참조한 DOM 요소에 대한 작업 수행

    return () => {
      // 컴포넌트 unmount 시에 수행해야 할 작업
    };
  }, [domRef]); // 의존성 배열에 Custom Hook 반환값을 입력

  return <div ref={domRef.ref}>Example</div>;
};

export default ExampleComponent;

위의 코드에서는 useDOMRef Custom Hook을 ExampleComponent에서 사용하고 있습니다. useRef로 생성한 ref 객체를 div 요소의 ref 속성에 전달하여 DOM 요소를 참조합니다. useEffect를 사용하여 컴포넌트의 마운트와 언마운트 시에 작업을 수행할 수 있습니다.

결론

useRef를 활용한 Custom Hook을 개발하는 방법에 대해 알아보았습니다. Custom Hook은 React의 재사용 가능한 로직을 분리하기 위한 강력한 도구입니다. useRef를 사용하여 DOM 요소를 참조하거나 상태값을 저장할 수 있으며, 이를 활용하여 유연하고 재사용 가능한 컴포넌트를 개발할 수 있습니다.

참조: React 공식 문서