React의 useRef 훅 가이드
React에서 useRef 훅은 DOM 요소에 직접 접근하거나, 컴포넌트의 상태를 저장할 필요가 있을 때 유용하게 사용됩니다. 이 포스트에서는 useRef의 기본 개념, 사용법, 그리고 다양한 활용 사례를 깊이 있게 살펴보겠습니다.
useRef란?
useRef는 React 훅 중 하나로, mutable한 객체를 생성하여 참조를 유지하는 기능을 제공합니다. 이 훅은 주로 다음과 같은 용도로 사용됩니다:
- DOM 접근: 특정 DOM 요소에 접근하여 직접 조작할 수 있습니다.
- 값 저장: 컴포넌트의 상태를 유지하되, 리렌더링 시 상태 업데이트 없이 값을 저장하고 싶을 때 사용됩니다.
useRef의 특징
- Mutable:
useRef로 생성된 객체는.current프로퍼티를 통해 접근하며, 이 값은 변경 가능(mutable)합니다. - 리렌더링 방지:
useRef의.current값을 변경해도 컴포넌트는 리렌더링되지 않습니다. - 초기값 설정:
useRef는 초기값을 받아들일 수 있으며, 해당 값은current프로퍼티에 저장됩니다.
useRef 사용법
1. 기본 문법
useRef를 사용하기 위해 React에서 import합니다.
import { useRef } from 'react';2. DOM 요소에 접근하기
아래 예시는 useRef를 사용하여 입력 필드에 직접 접근하는 방법을 보여줍니다.
import React, { useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
const handleFocus = () => {
inputRef.current.focus(); // input 요소에 포커스
};
return (
<div>
<input ref={inputRef} type="text" placeholder="여기에 입력하세요" />
<button onClick={handleFocus}>포커스</button>
</div>
);
}
export default FocusInput;3. 상태 저장하기
useRef는 값을 저장하는 데에도 사용할 수 있습니다. 이 예시에서는 이전 카운트 값을 저장하는 방법을 보여줍니다.
import React, { useState, useRef, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count; // 이전 count 값을 저장
}, [count]);
return (
<div>
<h1>현재 카운트: {count}</h1>
<h2>이전 카운트: {prevCountRef.current}</h2>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
export default Counter;useRef의 장점
- 성능 최적화:
useRef를 사용하면 불필요한 리렌더링을 방지할 수 있어 성능을 향상시킬 수 있습니다. - 직접 DOM 조작: React의 가상 DOM을 우회하여 직접 DOM을 조작할 수 있습니다.
- 상태 관리 대안: 상태 업데이트 없이도 값을 유지할 수 있어, 특정 상황에서 유용합니다.
useRef 활용 사례
-
외부 라이브러리 통합
React와 함께 외부 라이브러리를 사용할 때, 특정 DOM 요소에 접근하여 라이브러리를 초기화할 수 있습니다. -
애니메이션 효과
DOM 요소에 직접 접근하여 애니메이션 효과를 적용할 수 있습니다. 예를 들어, 특정 요소의 CSS 속성을 변경하거나 애니메이션 라이브러리와 통합할 수 있습니다. -
이벤트 핸들러
이벤트 핸들러에서 최신 상태나 프로퍼티에 접근해야 할 때useRef를 사용할 수 있습니다. 예를 들어, 타이머나 setInterval과 같은 비동기 작업에서 유용합니다.
주의할 점
- useRef는 리렌더링을 발생시키지 않기 때문에, 상태 업데이트가 필요한 경우에는 useState를 사용하는 것이 좋습니다.
- DOM 요소를 직접 조작하는 것은 React의 선언적 방식과 맞지 않기 때문에, 필요한 경우에만 사용해야 합니다.
결론
React의 useRef 훅은 DOM 요소에 직접 접근하거나 컴포넌트의 상태를 저장하는 데 유용한 도구입니다. 이 포스트를 통해 useRef의 개념과 다양한 사용 사례를 이해하는 데 도움이 되었기를 바랍니다. 실제 프로젝트에서 useRef를 활용하여 더 효율적인 React 애플리케이션을 개발해 보세요!
