React - useRef를 활용한 DOM조작 및 참조값 유지

리액트에서 redux또는 useState를 통해 참조하는 값이 변경되면 해당 값을 참조하는 컴포넌트를 리랜더링시킨다. 하지만 참조값이 변경되더라도 리랜더링이 필요하지 않을 경우 useRef를 사용하여 적절한 대안으로 삼을 수 있다.

• useRef를 사용하면 참조하는 값이 변경되더라도 컴포넌트의 리랜더링이 발생하지 않는다.
• redux나 useState를 통해 다른 참조하는 값이 변경되어 컴포넌트가 리랜더링되더라도 useRef가 참조하고 있는 값은 변경되지 않고 유지된다.

또는 DOM에 직접 접근하여 ref를 통해 해당 태그의 className값을 가져오거나 style을 변경하는 등의 작업을 할 수 있다.

 

이러한 특징을 가진 useRef는 useState나 redux에 비해 사용빈도는 높지 않지만 DOM에 직접 접근하여 해당 값을 가져오거나 미디어의 속성을 변경해야하는 상황에서 유용하게 활용된다.

 

0. useRef import 방법

import { useRef } from 'react';

react가 설치되어있으면 추가적으로 설치할 것 없이 위와같이 파일 상단에 추가하면 useRef를 손쉽게 사용할 수 있다.

 

1. useRef의 기본 형태

const fruit = useRef("mango");
// useRef의 괄호 안은 해당 변수의 기본값을 나타낸다.

console.log(fruit); // {current: "mango"}
console.log(fruit.current); // mango
console.log(typeof fruit); // object
// useRef는 해당 변수를 object로 생성시킨다.

useRef를 사용하여 위와 같이 useRef를 사용하면 변수 fruit을 콘솔에 찍어보면 object 형식으로 로그가 찍히는 것을 확인할 수 있다. useRef는 current를 통해 값에 접근할 수 있다.

 

2. useRef 값 변경

import { useRef } from "react";

const App = () => {
  const fruitRef = useRef("mango");

  const handleFruitName = () => {
    fruitRef.current = "orange";
    console.log(fruitRef.current);
  };

  return (
    <>
      <div>{fruitRef.current}</div>
      <button onClick={handleFruitName}>Change Fruit Name</button>
    </>
  );
};

export default App;

버튼을 클릭하면 useRef의 기본값이 mango로 설정된 fruitRef의 참조값을 orange로 변경시킨다. 버튼을 클릭하면 콘솔에는 {current: "orange"}가 나온다. 하지만 div태그의 텍스트 값은 계속 mango로 나오고 orange로 변경되지 않는다.

이를 통해 컴포넌트의 참조값이 변경되어도 리랜더링이 되지 않는 useRef의 특징을 확인할 수 있다.

 

3. 컴포넌트 리랜더링시 useRef의 값

useRef 참조값이 존재하는 컴포넌트를 useState를 활용하여 리랜더링 시켜도 값은 초기화되지 않고 유지가 된다.

import { useState, useRef } from "react";

const App = () => {
  const price = useRef(0);
  const [fruit, setFruit] = useState("");

  const setFruitName = (e) => {
    price.current++;
    setFruit(e.target.value);
  };

  return (
    <>
      <div>{price.current}</div>
      <input type="text" onChange={setFruitName} />
    </>
  );
};

export default App;

input태그에 과일이름을 입력하면 useState와 useRef의 참조값이 바뀌게 된다. fruit의 값이 변경되기에 컴포넌트 리랜더링이 이루어진다. 컴포넌트가 리랜더링되어도 useRef 참조값인 price는 초기화되지 않고 값이 증가하는 것을 확인할 수 있다. 즉, useState, redux 등으로 인해 컴포넌트가 리랜더링되어도 useRef 참조값은 초기화되지않고 값이 유지되는 특징을 확인할 수 있다.

 

4. DOM 직접 접근

useRef를 활용해 DOM에 직접 접근하기 위해서는 접근하고자 하는 태그에 ref를 사용하면 된다.

import { useRef, useEffect } from "react";

const App = () => {
  const fruitRef = useRef();

  useEffect(() => {
    console.log(fruitRef);
  }, []);

  return (
    <>
      <div ref={fruitRef}>과일 div</div>
    </>
  );
};

export default App;

/*
    실행 결과 : 
    {current: HTMLDivElement}
    current: <div>과일 div</div>
*/

접근할 div태그에 fruitRef 참조값을 정의한 후, 페이지가 처음 랜더링될 때, 해당 DOM 요소의 내용을 콘솔에 찍어준다.

 

5. DOM 요소 변경

import { useRef, useEffect } from "react";

const App = () => {
  const fruitRef = useRef();

  useEffect(() => {
    fruitRef.current.style.color = "blue";
    fruitRef.current.class="fruit-class";
  }, []);

  return (
    <>
      <div ref={fruitRef}>과일 div</div>
    </>
  );
};

export default App;

페이지가 처음 랜더링되면 fruitRef가 참조하는 DOM의 글자 색깔을 파란색으로 변경하고 className을 fruit-class로 변경하도록 코드를 작성하였다.

위와같이 useRef를 활용하여 DOM에 직접 접근해 스타일 및 className을 조작하여 css를 변경하거나 value값을 추출한는 등의 작업을 진행할 수 있다.

 

6. 미디어에서 활용

useRef의 이러한 특징을 활용하여 video 등의 미디어 요소에도 활용할 수 있다.

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

const App = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

  const setFirstVideo = () => {
    videoRef.current.src = 'https://vjs.zencdn.net/v/oceans.mp4';
  };

  const setSecondVideo = () => {
    videoRef.current.src =
      'https://lamberta.github.io/html5-animation/examples/ch04/assets/movieclip.mp4';
  };

  return (
    <>
      <video ref={videoRef} autoPlay controls />
      <button onClick={setFirstVideo}>Video1</button>
      <button onClick={setSecondVideo}>Video2</button>
    </>
  );
};

export default App;

비디오 플레이어의 영상 경로를 변경하여 영상의 내용이 바뀌도록 활용할 수 있다.

 

---

참조 사이트 : 

https://dmitripavlutin.com/react-useref-guide/

The Complete Guide to useRef() and Refs in React

 

https://medium.com/trabe/react-useref-hook-b6c9d39e2022

React useRef Hook

 

https://reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React