useRef

useRef

useRef란?

useRef는 컴포넌트가 렌더링되어도 유지되는 값을 저장하기 위한 React Hook이다.

주로 DOM 요소에 직접 접근하거나, 렌더링과 상관없이 값을 보관할 때 사용한다.

constref=useRef(initialValue);

useRef가 반환하는 객체는 current 속성을 가지며, 이 값은 컴포넌트가 다시 렌더링되어도 유지된다.

useRef의 주요 특징

1. 값이 유지된다

컴포넌트가 다시 렌더링되어도 ref.current 값은 초기화되지 않는다.

2. 값을 바꿔도 리렌더링되지 않는다

useState와 가장 큰 차이점이다.

useRef는 값을 바꿔도 화면이 다시 그려지지 않는다.

3. DOM 접근에 자주 사용된다

input에 포커스를 주거나, 특정 요소의 크기나 위치를 확인할 때 많이 사용한다.

useState와의 차이

즉, 화면에 보여지는 값이라면 useState,

렌더링과 무관하게 보관만 하면 되는 값이라면 useRef가 적합하다.

useRef 사용 예시 1 - DOM 요소 접근

입력창에 버튼 클릭 시 자동으로 포커스를 주는 예시이다.

import {useRef }from'react';

exportdefaultfunctionInputFocus() {
constinputRef=useRef(null);

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

return (
<div>
<inputref={inputRef}type="text"/>
<buttononClick={handleClick}>포커스 이동</button>
</div>
  );
}

이처럼 ref를 JSX 요소에 연결하면 해당 DOM에 접근할 수 있다.

useRef 사용 예시 2 - 이전 값 저장

렌더링과 상관없이 이전 값을 저장할 때도 사용할 수 있다.

import {useEffect,useRef }from'react';

exportdefaultfunctionPrevValue({ value }) {
constprevValue=useRef();

useEffect(() => {
prevValue.current=value;
  }, [value]);

return (
<div>
<p>현재 값: {value}</p>
<p>이전 값: {prevValue.current}</p>
</div>
  );
}

이 방식은 이전 props나 이전 state를 추적할 때 유용하다.

useRef 사용 예시 3 - 타이머 ID 저장

setTimeout, setInterval의 ID를 저장할 때도 많이 사용한다.

import {useEffect,useRef }from'react';

exportdefaultfunctionTimerExample() {
consttimerRef=useRef(null);

useEffect(() => {
timerRef.current=setInterval(() => {
console.log('실행 중');
    },1000);

return () =>clearInterval(timerRef.current);
  }, []);

return<div>타이머 실행</div>;
}

이런 값은 화면에 보여줄 필요가 없기 때문에 useState보다 useRef가 더 적절하다.

언제 useRef를 써야 할까?

useRef는 다음과 같은 상황에서 사용한다.

• input, div 같은 DOM 요소에 직접 접근할 때
• 이전 값 저장이 필요할 때
• 타이머 ID, 스크롤 위치처럼 렌더링과 무관한 값을 저장할 때
• 리렌더링 없이 값을 유지하고 싶을 때

useRef를 사용할 때 주의할 점

useRef의 값이 바뀌어도 화면은 자동으로 업데이트되지 않는다.

따라서 화면에 즉시 반영되어야 하는 데이터는 useState로 관리해야 한다.

예를 들어 사용자 입력값, 토글 상태, API 응답 데이터처럼 UI에 영향을 주는 값은 useRef보다 useState가 적절하다.

정리

useRef는 렌더링과 무관하게 값을 유지할 수 있는 Hook이다.

DOM 접근, 이전 값 저장, 타이머 관리처럼 화면을 다시 그릴 필요가 없는 경우에 유용하다.

반면, 값이 바뀌었을 때 화면도 함께 바뀌어야 한다면 useState를 사용해야 한다.