[React] useRef 사용해보기

 

useRef란?

useRef는 변경 가능한 ref객체를 생성하며, 이 객체는 .current라는 property를 가진다.

이 값을 DOM 요소에 연결하거나, 렌더링 사이에 유지해야하는 값을 저장하는데 사용할 수 있다.

 

const ref = useRef(초기값);
ref.current = 저장할 값;

- 값이 바뀌어도 컴포넌트는 다시 렌더링되지 않는다.

- DOM 요소에 직접 접근할 때도 사용된다.

 

실습해보기

input에 포커스 주기

버튼을 눌렀을 때 input에 포커스가 가도록 만들어봤다.

useRef로 해당 DOM 요소에 직접 접근할 수 있다.

import { useRef } from "react";

const FocusInput = () => {
	const inputRef = useRef<HTMLInputElement>(null);

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

	return (
		<div>
			<h2>useRef로 input 포커스</h2>
			<input
				ref={inputRef}
				type="text"
				placeholder="클릭 시 포커스 됨"
				style={{ marginRight: "1rem" }}
			/>
			<button onClick={handleClick} style={{ marginTop: "1rem" }}>
				포커스 주기
			</button>
		</div>
	);
};

export default FocusInput;

포커스 주기 버튼을 클릭하면 input에 focus가 활성화되는 것을 확인할 수 있다.

렌더링 횟수 추적하기

useRef는 값이 바뀌어도 렌더링되지 않는다는 특징이 있다.

해당 특징을 활용해 컴포넌트가 몇 번 렌더링됐는지를 추적해봤다.

import { useEffect, useRef, useState } from "react";

const RenderCount = () => {
	const [value, setValue] = useState("");
	const renderCount = useRef(1);

	useEffect(() => {
		renderCount.current += 1;
	});

	return (
		<div>
			<h2>랜더링 횟수 추적</h2>
			<input value={value} onChange={(e) => setValue(e.target.value)} />
			<p>랜더링 횟수: {renderCount.current}</p>
		</div>
	);
};

export default RenderCount;

input값을 변경할 때마다 렌더링 횟수가 올라가는 것을 확인할 수 있다.

renderCount는 상태가 아니라서 리렌더링이 발생하지 않는다.

 

정리

- useRef는 렌더링 없이 값을 저장하거나 DOM에 직접 접근할 때 사용된다.

- .current를 통해 값을 읽거나 쓸 수 있다

- 상태처럼 렌더링을 유발하지 않기 때문에 성능 최적화에 유리할 때도 있다.

- input 포커스, 이전 값 저장, 외부 라이브러리 DOM 접근 등에 자주 쓰인다.

 

 

useRef는 프로젝트를 진행하면서 모달 팝업을 제어나 특정 DOM에 포커스를 줄 때 사용했었는데

이번에 정리해보면서 렌더링 없이 값을 유지할 수 있다는 특징을 명확히 이해하게 되었다.

단순한 도구 같지만 상황에 따라 꽤 유용하게 활용할 수 있는 Hook이라는걸 다시 느꼈다.

 

공식 문서

useRef – React