React Hooks - useRef 사용법

UseRef 사용법

[공식 문서]

 

// 값을 넣는 경우
const refContainer = useRef(initialValue);

// dom을 선택하는 경우

function sampleFunc() {
	const inputRef = useRef(null);
    const onButtonClick = () => {
    	inputRef.current.focus();
    }
    
    return (
    	<>
        	<input ref={inputRef} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    )

}

 

useRef는 .current 속성만을 가진 객체를 반환해준다. initialValue가 이 current에 할당된다. 이 객체는 컴포넌트의 full lifetime 동안 있는다. 즉, useRef는 .current에 변할수있는 값을 넣을 수 있는 박스이다.

 

특히 위의 예시 코드의 sampleFunc처럼 DOM에 접근하는 경우 

 

ref={somethingRef} 

 

형식으로 쓰게 되는데, 이때 React가 .current에 알아서 DOM Node를 할당해줘서 조작이 가능하다. 

 

또한 class형 컴포넌트에서 변수를 사용한것처럼 useRef를 사용할 수 있다. useRef는 언제 값이 변한지도 알려주지 않고, .current의 값을 바꾸는 것은 re-render를 일으키지도 않는다. 

 

 

 

 

useState를 사용했을 때와의 차이점

const smapleComponent = () => {

	const [num, setNum] = useState(0);
    const numRef = useRef(0);
    
    const increment = () => {
    	setNum(num + 1); 
        numRef.current++;
        setTimeout(
        () => alert("num: ", num, " / ref:", numRef), 1000
        ) // 한번 눌렀을때 alert창에서 num은 여전히 0이라고 출력된다. 
    }

	...
}

 

위의 예시를 보면 어떤 버튼을 눌러서 increment 함수가 동작하면 rerendering 되면서 state 가 업데이트 되겠지만, increment함수내에서는 setNum을 했다고 바로 num 값이 업데이트가 되는 것이 아니다. 이때 alert창의 num은 setTimeout이 실행될 당시의 클로저의 num 값이다. 하지만 ref의 경우 즉시 반영이 된다. 

 

즉, 즉시 반영되는 값이 필요하다면 useRef를 사용하는 것이 좋을 수 있다.