React 애플리케이션 만들 때 DOM 조작은 지양해야 하지만,
DOM을 건드려야하는 상황이 발생하는데 이 때 사용하는 Hook 함수
useRef
로 DOM노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있음
const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
<div>
<input ref={주소값을_담는_그릇} type="text" />
{/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
{/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
{/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
</div>);
이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않음
이 특성을 활용하여 아래 제한된 상황에서 useRef
활용할 수 있음
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>);
}
제시된 상황을 제외한 대부분의 경우 useRef
남용은 부적절, React의 특장점인
선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야함