➊ useRef를 사용하는 목적
우리가 자바스크립트를 사용할 때 특정 DOM을 선택하기 위해
querySelector 등의 함수를 사용한다.
React를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 필요하다.
그러한 상황에서 우리는 useRef를 사용한다.
React에서 useRef는 주로 DOM 요소를 참조하기 위해 사용되지만
컴포넌트 내부에서 지속적으로 참조해야 하는 값을 관리하는 데에도 활용될 수 있다.
➋ useRef의 특징
useRef는 useState와 구별되는 큰 특징이 있다.
첫 번째로, useRef는 값이 변경될 때 리렌더링을 유발하지 않는다.
이러한 특징은 성능 최적화에 도움을 줄 수 있다.
예를 들어, 컴포넌트 내에서 변경되어야 하는 값이 있지만
이 값의 변경이 화면에 바로 반영될 필요가 없는 경우 useRef을 사용할 수 있다.
두 번째로, 렌더링과 무관하게 값을 계속 보존할 수 있다.
useRef로 생성한 ref 객체의 current 속성에 할당된 값은
컴포넌트의 전 생애 주기를 통해 유지되기 때문에
컴포넌트가 재렌더링되어도 변경되지 않는다.
위와 같은 특성들을 가지는 useRef는
컴포넌트의 렌더링과는 별개로 데이터를 관리하거나
DOM 요소에 접근하는 등의 작업을 수행할 때 매우 유용하다!
useRef을 잘 사용하기 위해서는 리액트의 렌더링에 대한 이해가 선행되어야 한다!
➌ useRef 사용 예시
① 특정 DOM 조작
대표적으로 input 요소를 클릭하지 않고 포커스를 주고 싶을 때 useRef을 많이 사용한다.
예를 들어, 로그인 화면을 보여줬을 때 id를 넣는 input을 굳이 클릭하지 않아도 자동으로 포커싱 할 수 있다.
import React, { useEffect, useRef } from 'react';
function App() {
const inputRef = useRef();
useEffect(() => {
inputRef.current.focus();
}, []);
return (
<div>
<input ref={inputRef} type="text" placeholder="id" />
<button>로그인</button>
</div>
);
}
export default App;useRef Hook을 사용하여 참조 객체를 생성하고
이 객체를 DOM 요소의 ref 속성에 할당함으로써 해당 DOM 요소에 접근할 수 있다.
② 변수 관리
변수를 관리할 때 state 대신 ref 안에 값을 저장한다면
ref 안에 있는 값을 아무리 변경해도 컴포넌트는 다시 렌더링 되지 않는다.
그렇기 때문에 값 변경 시 렌더링을 발생시키지 말아야 할 때 useRef는 유용하다!
import React, { useRef } from 'react';
function App() {
const countRef = useRef(0);
const increment = () => {
countRef.current += 1;
// 현재 카운트를 콘솔에 출력
console.log(countRef.current);
};
return (
<div>
<p>카운트: {countRef.current}</p>
<button onClick={increment}>증가</button>
</div>
);
}
export default App;위의 코드에서 countRef을 사용하여 카운트를 관리한다.
버튼을 클릭할 때마다 카운트를 증가시키지만 컴포넌트는 다시 렌더링되지 않는다.
대신, 현재 값을 콘솔에 출력하여 확인할 수 있다.
이처럼 렌더링을 피해야 할 때 useRef를 활용할 수 있다.
📎 참고 자료
리액트에서 useRef의 이해와 활용
https://f-lab.kr/insight/understanding-and-using-useref-in-react
ref와 useRef는 어떻게 사용하나
https://pinenamu.tistory.com/483
