useRef : React에서 DOM 조작하기

소개

리액트에서 useRef는 DOM을 조작하고 컴포넌트의 상태를 유지하는 데 사용되는 강력한 훅 중 하나입니다.

이 글에서는 useRef의 기본 개념을 다뤄보겠습니다.

 

useRef란?

useRef는 리액트 함수 컴포넌트에서 DOM 요소에 직접적으로 접근하거나, 컴포넌트의 상태를 유지하는 데 사용됩니다.

이는 클래스 컴포넌트에서의 this와 유사한 역할을 합니다.

 

기본 사용법

useRef를 사용하려면, 먼저 리액트에서 해당 훅을 가져와야 합니다.

그리고 함수 컴포넌트 내에서 useRef를 선언합니다.(요즘은 자동 import가 되더라구요)

아래와 같이 선언을 하게 되면 myRef을 사용해 DOM 요소에 접근할 수 있습니다.

import React, { useRef } from 'react';

const MyComponent = () => {
  const myRef = useRef();

  // 나머지 코드
}

DOM 조작

useRef를 사용하면 DOM 요소에 쉽게 접근할 수 있습니다.

예를 들어, 특정 버튼을 클릭했을 때 input 요소에 포커스를 주고 싶다면 다음과 같이 할 수 있습니다.

import { useRef } from "react";

const MyComponent = () => {
  const inputRef = useRef();

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

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

컴포넌트 상태 유지

useRef는 DOM 조작하기위해 주로 사용되지만

useRef를 사용하여 컴포넌트의 상태를 유지할 수 있습니다.

React 컴포넌트는 State가 변할 때마다 다시 랜더링이 되면서 컴포넌트 내부 변수들이 초기화가 됩니다.

이 말은 해당 컴포넌트 함수의 변수들이 모두 초기화가 되고 모든 로직 등이 다시 실행되는 것을 의미합니다.

이렇게 원하지 않는 랜더링을 ref를 사용하여 방지할 수 있습니다.

ref의 유용한 점은 ref 안에 있는 값을 아무리 변경해도 컴포넌트는 다시 랜더링 되지 않습니다.

즉, State 대신 Ref를 사용한다면 불필요한 랜더링을 막을 수 있습니다.

또한 컴포넌트가 아무리 랜더링이 되어도 Ref안에 저장되어 있는 값은 변화되지 않고 그대로 유지가 됩니다.

그렇기 때문에 변경 시 랜더링을 발생시키지 말아야 하는 값을 다룰 때 정말 편리합니다.

import { useRef } from "react";

const MyComponent = () => {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current += 1;
    console.log(`Clicked ${countRef.current} times`);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

외부 라이브러리와 함께 사용

useRef는 외부 라이브러리와 연동하는 데에도 유용합니다.

예를 들어, 특정 라이브러리의 인스턴스를 useRef를 통해 유지할 수 있습니다.

리액트 컴포넌트에서 외부 라이브러리를 사용할 때, 일반적으로 라이브러리의 인스턴스를 참조하거나 라이브러리의 메서드를 호출해야 하는 경우가 있습니다.

이때 useRef를 사용하면 함수 컴포넌트에서 이러한 외부 라이브러리의 인스턴스를 손쉽게 유지할 수 있습니다.

예를 들어, 어떤 라이브러리를 초기화하고 그 인스턴스를 계속 사용해야 하는 경우를 생각해보겠습니다.

import { useEffect, useRef } from 'react';
import SomeLibrary from 'some-library';

const MyComponent = () => {
  const libraryInstance = useRef(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 라이브러리 인스턴스 초기화
    libraryInstance.current = new SomeLibrary();
    // 라이브러리 초기화 후 필요한 설정 등을 수행
    libraryInstance.current.initialize();
    // 나머지 코드
  }, []);

  // 나머지 코드
}

위 코드에서 libraryInstance라는 useRef를 통해 생성된 객체는 라이브러리의 인스턴스를 참조합니다.

useEffect 훅을 사용하여 컴포넌트가 처음 마운트될 때 라이브러리를 초기화하고, 이후에는 해당 라이브러리의 인스턴스를 계속 유지할 수 있습니다.

이렇게 하면 컴포넌트의 랜더링이 발생해도 라이브러리 인스턴스가 새로 생성되지 않고 이전의 값을 유지할 수 있습니다. 이는 라이브러리 초기화나 설정 등의 비용이 크고 불필요한 작업을 피하기 위해 사용될 수 있습니다.

요약하면, useRef를 이용하여 함수 컴포넌트 내에서 외부 라이브러리의 인스턴스를 유지하면, 해당 라이브러리와 컴포넌트 간의 효율적인 상호작용이 가능해집니다.

useRef의 주의사항

useRef를 사용할 때 주의해야 할 점도 몇 가지 있습니다.

예를 들어, useRef는 상태 변경을 감지하지 않기 때문에 상태에 의존적으로 업데이트되어야 하는 경우에는 useState를 사용해야 합니다.

마무리

useRef는 리액트 함수 컴포넌트에서 DOM 조작과 상태 유지를 위한 강력한 도구입니다.

이를 통해 코드를 깔끔하게 유지하고, 다양한 상황에서 유연하게 사용할 수 있습니다.

useRef의 다양한 활용법을 익히면, 리액트 애플리케이션 개발에서 더욱 효율적인 코드를 작성할 수 있을 것입니다.