React 개발을 할 때, 주로 useState 훅을 사용하여 컴포넌트의 상태를 관리하지만, 모든 상태 변경이 렌더링을 유발하기 때문에 때로는 비효율적일 수 있습니다. 특히, 값의 변경이 화면에 직접적인 영향을 미치지 않을 때 불필요한 렌더링이 발생할 수 있습니다. 이럴 때 사용할 수 있는 것이 바로 useRef 훅입니다.
useRef
useRef는 React에서 제공하는 훅 중 하나로, 값이 변경되어도 컴포넌트의 렌더링을 유발하지 않는 참조(ref)를 관리할 수 있습니다. 이 훅은 주로 DOM 요소에 접근할 때 사용되지만, 렌더링과 무관하게 데이터를 유지해야 할 때도 매우 유용합니다.
useRef의 주요 사용 사례
- DOM 요소 접근: DOM 요소를 직접 조작해야 할 경우, 해당 요소의 참조를 저장하고 관리할 수 있습니다.
- 렌더링에 영향을 주지 않는 값 저장: 컴포넌트의 계산 값이나 상태가 UI 업데이트 없이 내부적으로만 사용되어야 할 때 활용할 수 있습니다.
useRef의 간단한 사용법
초기화
useRef를 사용하려면 먼저 React에서 useRef를 import 해야 합니다.
import { useRef } from 'react';useRef 생성
useRef 훅은 초기값을 인자로 받아 ref 객체를 생성합니다. 이 ref 객체는 .current 프로퍼티를 통해 전달된 초기값을 유지합니다.
const myRef = useRef(initialValue);initialValue는 ref 객체의 초기 값을 설정합니다. 이 값은 나중에 변경할 수 있으며, 값이 변경되더라도 컴포넌트는 재렌더링되지 않습니다.
useRef 값 접근 및 수정
생성된 ref 객체의 .current 속성을 통해 저장된 값에 접근하거나 수정할 수 있습니다.
console.log(myRef.current); // 초기 값 출력
myRef.current = newValue; // 새로운 값으로 업데이트예제
버튼을 클릭할 때마다 카운트가 증가하는 기능을 구현하였습니다. useState는 카운트의 상태를 관리하고 UI를 업데이트하고, useRef는 클릭 횟수를 기록하지만 UI를 업데이트하지는 않습니다.
import React, { useState, useRef } from 'react';
function SimpleCounter() {
// 카운트 상태 관리
const [count, setCount] = useState(0);
// 클릭 횟수를 추적하지만 UI 업데이트는 하지 않음
const clickCount = useRef(0);
const handleCount = () => {
setCount(count + 1); // 카운트 상태를 업데이트하여 UI에 반영
clickCount.current += 1; // 클릭 횟수를 증가시키지만, UI에는 반영하지 않음
};
return (
<div>
<h1>카운트 : {count}</h1>
<h1>클릭 횟수 : {clickCount.current}</h1>
<button onClick={handleCount}>카운트 증가</button>
</div>
);
}
export default SimpleCounter;설명
- useState 사용:
count는 사용자가 버튼을 클릭할 때마다 증가하는 상태입니다. 이 상태는 UI에 직접적으로 반영되며, 상태가 변경될 때마다 컴포넌트가 재렌더링됩니다. - useRef 사용:
clickCount는 클릭 횟수를 추적하지만, 이 값이 변경되어도 컴포넌트의 재렌더링은 발생하지 않습니다.useRef는 이러한 비렌더링 상태의 추적에 아주 적합합니다.
결론
useRef는 React에서 상태 관리를 보다 효율적으로 할 수 있게 도와주는 중요한 훅입니다. 값이 변경되어도 컴포넌트의 재렌더링을 유발하지 않으므로, 성능 최적화나 비동기 작업의 중간 상태를 저장하는 데 유리합니다. 이 훅을 통해 불필요한 렌더링 없이 컴포넌트의 동작을 효율적으로 관리할 수 있습니다.
