const refContainer = useRef(initialValue);
useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 Lifecycle를 통해 유지된다.
일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우이다.
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있으며
일반적으로 리액트에서는 DOM을 선택할 때 ref를 사용하는게 익숙하다.
<div ref={myRef} />
를사용하여 React로 ref 객체를 전달한다면, React에서는 새로운 값을 불러올 때 마해당Dom의 .current를 프로퍼티를 설정할 것이다.
import { useRef, useState, useEffect } from "react";
export default function CounterPage() {
const router = useRouter();
const inputRef = useRef<HTMLInputElement>(null);
const [count, setCount] = useState(99);
useEffect(() => {
console.log("마운트됨");
inputRef.current?.focus();
return () => {
console.log("컴포넌트 사라짐!!!");
};
}, []);
const onClickCounter = () => {
setCount((prev) => prev + 1);
};
const onClickMove = () => {
router.push("/");
};
console.log("나는 언제 실행되게???");
return (
<div>
<input type="text" ref={inputRef} />
<div>현재카운트{count}</div>
<button onClick={onClickCounter}>카운트 올리기!!!</button>
<button onClick={onClickMove}>나가기!!!</button>
</div>
);
}
그렇지만, ref 속성보다 useRef()가 더 유용하게 사용될 수 있다.
이것은 useRef()가 순수 자바스크립트 객체를 생성하기 때문입니다. useRef()와 {current: ...}
객체 자체를 생성하는 것의 유일한 차이점이라면 useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것이다.
useRef는 내용이 변경될 때 그것을 알려주지는 않는다 .current 프로퍼티를 변형이 리랜더링을 발동시키지 않으며, React가 DOM을 선택해 ref를 attach하거나 detach할 때 다른 코드가 필요하다면 콜백 ref를 사용한다.