useRef 로 특정 DOM 선택하기
리액트를 사용하기 전까지 특정 태그 즉 대상에 접근할 때 document.getElementById() 와 같은 selector 함수을 사용했다. 리액트를 사용할 경우 아주 드물게 DOM을 직접 선택해야하는 경우가 있다. 하지만 리액트는 실제 DOM이 아닌 가상돔(virtual DOM)을 다루기 때문에 이 방법으로 접근하면 문제가 생길 수 있다.
focus를 선택해주거나 두 개 컴포넌트의 싱크를 맞출 때 (pagination 등) 필요하다.
그래서 리액트의 Hook 함수 중 하나인 useRef
특정 태그를 조작하기 위해 선택할 때 사용하며 useRef는 ref를 설정해주는 역할을 한다..
예시
대표적인 예로 input 태그를 선택하여 커서를 깜빡이도록 하고 싶다면 useRef를 사용하여 input 태그를 선택하고, focus() 기능을 활용하여 커서를 깜빡이도록 한다.
// hook import
import { useRef } from "react";
export default function CounterPage() {
//Ref 코드 생성
const inputRef = useRef();
// 태그에 접근해서 실행시킬 함수
// .current 값은 우리가 원하는 <input /> 태그 DOM을 가리킨다
useEffect(() => {
console.log("마운트됨!!!");
inputRef.current?.focus();
}, []);
return (
<div>
// Ref를 적용하고 싶은 input태그(=접근하고 싶은 태그)
// 여기에 focus 되도록!!!
<input type="text" ref={inputRef} />
</div>
);
}
useRef의 또다른 기능 변수관리
useRef Hook은 컴포넌트 안에서 어떤 변수를 관리할 수 있는 기능도 가지고 있다.
흔히 변수 관리는 useState를 사용하지만 useState로 변수를 상태값을 관리하면 상태값이 바뀔 때마다 리렌더가 되는데 useRef로 상태값을 관리하면 컴포넌트가 리렌더가 되지 않는 특징이 있다.
상태는 상태를 바꾸는 함수를 호출한 후에, 렌더링 후로 업데이트 된 상태를 조회할 수 있으며 useRef로 관리하고 있는 변수는 설정 후 바로 조회할 수 있다.
또한 useRef로 만들어진 변수는 리액트의 전역 저장소에 저장되어서 함수를 다시 호출하더라도 마지막으로 업데이트한 current 값이 유지되는 장점이 있다고 한다.
위의 기능이 쓰이는 경우
- setTimeout, setInterval 을 통해서 만들어진 id
- 외부 라이브러리를 사용하여 생성된 인스턴스
- scroll 위치
출처 및 참고
https://ko.reactjs.org/docs/hooks-reference.html#useref
https://sezzled.tistory.com/entry/useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%A0%95%EB%A6%AC
