React : useRef에 대해서

useRef는 리액트 훅의 한 종류로, DOM 요소에 직접적으로 접근을 해서 불필요한 재렌더링을 방지하는 역할을 한다. 과도한 useRef 사용은 성능 저하가 발생할 수 있어, 보통 직접적으로 DOM 조작이 필요하거나 렌더링과 무관하게 상태를 저장할 필요가 있을 때 사용하는 것이 바람직하다.

 

• import { useRef } from 'react';
• const Ref변수명 = useRef(초기값);
  - 초기값 : useRef 객체의 current 속성 초기 설정값이다.
  
  
• Ref변수명.current
  useRef는 단일 프로퍼티(current 프로퍼티)를 가진 객체를 반환한다. 이 속성에 해당 useRef 접근하여 값을 조회 및 수정할 수 있다. 
  
  

useRef를 사용한 값 참조

useState와 useRef를 비교해보았다. useRef의 경우 값이 변경되어도 웹 페이지가 렌더링이 되지 않는 것을 볼 수 있다. useState를 통해 재렌더링이 되면 저장되어 있던 useRef의 값이 불러와지는 것을 볼 수 있다.(렌더링과 무관하게 상태 저장)

import { useRef, useState } from "react";

export default function Comp1() {
    
    const refCount = useRef(0);
    const [count, setCount] = useState(0);
    
    return (
        <>
        <h1> useRef : {refCount.current}</h1>
        <h1> useState : {count} </h1>

        <button onClick={() => (++refCount.current)}> useRef 사용 </button>
        <button onClick={() => (setCount(n => n + 1))}> useState 사용 </button>
        </>
    );

}

useRef를 사용한 DOM 조작 

ref를 사용하여 DOM 중에 비디오 태그에 대한 조작을 해보았다. 비디오 요소를 참조하는 ref객체는 컴포넌트가 리렌더링되더라도 동일한 객체를 유지하므로, 비디오의 현재 상태나 제어를 계속해서 사용이 가능하다. 또한 비디오 제어 시에 렌더링에 영향을 주지 않기 때문에 효율적으로 작업할 수 있다. 

import { useRef } from "react";
import video from "../assets/video/video.mp4"

export default function Comp1() {
    const videoRef = useRef();

    function playVideo() {
        videoRef.current.play();
    }

    function stopVideo() {
        videoRef.current.pause();
    }

    return (
        <div>
            <video src={video} ref={videoRef} style={{ width: "600px", height: "300px", border: "1px solid black" }}/>
            <hr/>
            <button onClick={() => playVideo()}>재생</button>
            <button onClick={() => stopVideo()}>정지</button>
        </div>
    );

}