React 기본 - useRef

useRef - 정보 저장소

useRef란, 렌더링에 필요하지 않는 값을 참조할 수 있는 훅입니다.

쉽게말해서 "렌더링과 상관 없는 값이 유지되는 장소"입니다.

 

일반 변수의 경우 렌더링이 되면 값이 초기화되어버립니다. 하지만 useRef를 쓰면 렌더링이되어도 값을 유지시킬 수 있습니다.

 

이와 비슷한 것으로 useState또한 렌더링이 되어도 값이 유지가됩니다.

useSatate와 관련된 내용은 다른 포스팅을 참고해주세요.

https://shinebyul.tistory.com/134

React Hook 기본 - useState, useEffect

 

useState와 useRef의 가장 큰 차이는 렌더링을 유발하는가 아닌가입니다.

useState의 경우 setState 함수가 호출되면 리렌더링을 발생시킵니다.

하지만, useRef의 경우 값이 바뀌어도 리렌더링이 발생하지 않습니다.

 

버튼을 누르면 count가 올라가는 코드로 예시를 들어보겠습니다.

 

useState를 사용한 경우, 클릭할 때마다 버튼 아래의 숫자가 변하는 것을 볼 수 있습니다.

import {useState} from "react";

export const Test =()=>{
    const [count, setCount] = useState(0);

    const addCount =()=>{
        setCount(count+1);
        console.log("count:", count);
    }

    return(
        <div className="mt-50 ml-20">
            <button
                className="bg-gray-200 p-3"
                onClick={()=>addCount()}>click</button>
            <div>count : {count}</div>
        </div>
    );
}

버튼을 한번 클릭한 경우

 

이번에는 useRef를 사용해보겠습니다.

먼저 useRef를 사용하기 위해 import를 해줍니다.

import {useRef} from "react";

 

그리고 useRef 변수를 선언해줍니다.

useRef() 괄호 안의 값은 변수의 초기값으로, 숫자, 문자 등등을 넣을 수 있습니다.

const count = useRef(0);

 

useRef의 값은 .current를 통해 접근할 수 있습니다.

.current를 이용해 버튼 클릭시 값이 증가되도록 합니다.

count.current = count.current+1;

 

전체 코드는 다음과 같습니다.

import {useRef} from "react";

export const Test =()=>{
    const count = useRef(0);

    const addCount =()=>{
        count.current = count.current+1;
        console.log("count:", count);
    }

    return(
        <div className="mt-50 ml-20">
            <button
                className="bg-gray-200 p-3"
                onClick={()=>addCount()}>click</button>
            <div>count : {count.current}</div>
        </div>
    );
}

 

이렇게 하면, 화면은 useState를 썼을때와 아주 똑같습니다.

버튼을 클릭해보면, 콘솔에는 클릭한 수만큼 count수가 잘 나오는 것을 확인할 수 있습니다. 

하지만, 화면의 count는 변하지 않습니다.

useRef 변수는 레렌더링을 발생하지 않기 때문에 숫자가 아무리 바뀌어도 React가 화면을 다시 계산하지 않기 때문입니다.

버튼을 다섯번 클릭한 모습

 

즉, useState와 useRef 모두 저장된 값은 렌더링과 상관없이 유지되지만, useRef는 useState와 다르게 리렌더링을 발생시키지않습니다. 따라서 화면에 표시해야하는 정보는 useState를, 화면에 표시하지 않지만 값을 유지해야하는 정보는 useRef를 사용합니다.

 

useRef - DOM 접근

useRef는 정보저장 뿐만 아니라 DOM에 접근하고 제어하는 용도로 사용할 수 있습니다.

 

예시 1 : input 값 

import {useRef} from "react";

export const InputTest=()=>{
    const ref = useRef<HTMLInputElement>(null);

    return(
        <div className="p-20">
            <input
                className="bg-input"
                ref={ref}
            />
            <button className="bg-gray-200 ml-3 p-1"
                onClick={()=>alert(ref.current?.value)}>입력</button>
        </div>
    );
}

 

예시 2 : 스크롤 접근

import { useRef } from "react";

export const InputTest = () => {
    const ref = useRef<HTMLDivElement | null>(null);

    const handleClick = () => {
        ref.current?.scrollIntoView({ behavior: "smooth" });
    };

    return (
        <div className="p-20">
            <button
                className="bg-gray-200 ml-3 p-1"
                onClick={handleClick}
            >
                아래로 스크롤
            </button>
            <div style={{ height: "150vh", background: "#eee" }}></div>

            <div ref={ref} className="h-200" >
                스크롤됐지롱
            </div>
        </div>
    );
};

 

 

useRef 의 DOM 접근 

태그	ref.current의 정체(타입)	대표 속성 & 메서드(DOM API)	실무에서 가장 흔한 사용
input	HTMLInputElement	value, focus(), blur(), checked, type, files, setSelectionRange()	포커스 주기, 값 읽기/초기화, checkbox 제어, file input 읽기
textarea	HTMLTextAreaElement	value, selectionStart, selectionEnd, rows, cols	자동 리사이징, 포커스, 커서 위치 제어
div / span / p	HTMLDivElement, HTMLSpanElement, HTMLParagraphElement	innerText, innerHTML, style, classList, scrollTop, scrollHeight, getBoundingClientRect()	스크롤 제어, 자동 스크롤(채팅/로그뷰어), 사이즈 측정, 애니메이션
canvas	HTMLCanvasElement	getContext("2d"), height, width, toDataURL()	Chart.js/D3 캔버스 초기화, 그래픽 렌더링
video	HTMLVideoElement	play(), pause(), currentTime, volume, muted, duration, requestFullscreen()	영상 재생/멈춤 제어, seek 이동
select	HTMLSelectElement	value, selectedIndex, multiple, options	선택값 읽기/설정, 동적 옵션 선택
button	HTMLButtonElement	.click(), .disabled, .type	버튼 강제 클릭, 버튼 활성/비활성 제어
form	HTMLFormElement	submit(), reset(), elements, action, method	폼 submit/reset 제어, validate 전 submit 막기
ul / li	HTMLUListElement, HTMLLIElement	scrollTop, scrollIntoView(), children	메뉴 자동 스크롤, 리스트 포커싱
svg	SVGSVGElement	getBBox(), createSVGPoint(), style, classList	D3 그래프, 차트 라이브러리 제어, zoom/pan 기능
audio	HTMLAudioElement	play(), pause(), currentTime, volume	소리 재생/멈춤 제어
img	HTMLImageElement	src, width, height, decode()	이미지 lazy loading, 이미지 로드 완료 체크