[React] useRef

권용준·2023년 12월 6일

React

useRef

📌 정의

React에서 제공하는 훅 중 하나로, 주로 DOM 요소에 접근하거나 컴포넌트의 인스턴스 변수를 유지할 때 사용한다. useRef는 함수 컴포넌트에서 변수를 선언하고 이를 유지할 때 사용되며, 클래스 컴포넌트의 인스턴스 변수와 유사한 역할을 한다.

즉, 특정 DOM을 선택할 때 사용하는 React Hooks 이다.

❗️특징

- useRef는 기본적으로 객체를 반환하며, 해당 객체는 current 프로퍼티를 가진다.

- DOM 요소에 접근

useRef를 사용하여 함수 컴포넌트에서 DOM 요소에 직접 접근할 수 있다.

- 컴포넌트의 인스턴스 변수 유지

useRef를 사용하여 컴포넌트의 렌더링 간에 유지되는 변수를 생성할 수 있다.

- 값의 변경 여부 추적

useRef를 사용하여 값의 변경 여부를 추적하고, 컴포넌트가 리렌더링되어도 해당 값이 초기화되지 않도록 할 수 있다.

✍ 예시 코드

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

function MyComponent() {
  // useRef를 사용하여 초기값이 null인 ref 객체를 생성
  const myRef = useRef(null);

  // useEffect를 사용하여 컴포넌트가 마운트될 때 실행되는 부수 효과에서 ref에 접근
  useEffect(() => {
    // myRef.current는 실제 DOM 요소를 참조하게 됨
    console.log(myRef.current);
  }, []);

  return (
    <div ref={myRef}>
      {/* 내용 */}
    </div>
  );
}

export default MyComponent;