useRef()
<input type='name' placeholder='input your name..'/>
위와 같이 react에서 특정 태그 element에 접근하고자 하려면 어떻게 해야할까?
react에서 바닐라 js처럼 document 를 통해 태그 참조를 하려고 하면 react의 스스로 동작하여 계산하는 로직에 효율성을 주지 못한다. 그러기에 리엑트가 모든 기능을 관장하기위해 useRef()라는 별도의 훅을 통해 제공한다.
아래 예제는 state가 아닌 ref를 통한 참조를 통해 input의 값이 변경될 때 마다 콘솔에 띄우는 예제이다.
const userNameRef = useRef<HTMLInputElement>(null);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (userNameRef.current) {
userNameRef.current.value = e.target.value;
console.log(userNameRef.current.value );
}
};
return (
<div>
<input ref={userNameRef} onChange={handleChange} defaultValue={'hki'}/>
</div>
);
위 예제에서는 ref로 받는 변수를 어떤 변수에 적용할지에 대한 타이핑을 진행해주고, onChange 핸들러 함수를 작성하였다. 함수에는 매개변수로 받는 이벤트를 타이핑해주고, useNameRef의 초기값은 null 이기 때문에, 타이핑 상황에 따른 조건을 나눠 값의 변화를 할당해준다.
또한 useRef()로 할당된 변수는 변수의 본체가 아닌 .current 라는 속성에 저장되어있다. 이 점을 유의해야한다. (userNameRef.current 에는 input태그가 저장되어있기에 input의 value 속성에 값을 할당하였다.)
위 예제는 ref를 태그 단순 태그 엘리먼트에 적용하여 값을 참조해보았다. 이와 달리 단순 변수에 ref를 할당할 수도 있다.
const countRef = useRef<number>(0);
const handleClick = () => {
countRef.current++
console.log(`current count: ${countRef.current}`);
};
return (
<div>
<button onClick={handleClick}>click!</button>
<p>{countRef.current}</p>
</div>
);
버튼을 클릭할 때마다 countRef의 숫자를 하나씩 증가시키는 예제이다. 버튼을 총 4번 클릭해보겠다. 그렇다면 콘솔과 화면의 숫자는 4가 될 것인가? 이 예제의 결과는 어떻게 출력이 될까?
콘솔에는 4가 잘 출력되었지만 화면의 숫자는 0 그대로이다. 똑같이 버튼을 4번 클릭한 것이지만 유저의 화면에는 리렌더링이 일어나지 않았다.
즉, useRef()는 useState()와 달리 값의 변화가 렌더링에 영향을 주지 않는다. 또한 useRef()는 컴포넌트의 리렌더링의 영향을 받지 않고 값을 계속 유지한다는 특징이 있다.
useState와 useRef의 차이
useState() 와 useRef()의 차이를 정리하면 다음과 같다.
-
렌더링
useState(): 상태 값을 관리하며 상태가 변경될 때 컴포넌트가 리렌더링 된다.
useRef(): 값의 변경이 컴포넌트의 렌더링에 영향을 주지 않는다. -
값의 저장과 유지
useState(): 값을 저장하고 컴포넌트가 리렌더링될 때 이전 상태를 유지한다.
useRef(): 값을 저장하고 컴포넌트의 리렌더링과 무관하게 값이 유지된다. -
값의 변경
useState(): 상태를 업데이트하기 위해선 특정 setter함수를 사용해야한다.
useRef(): 값을 변경하는 것에 별도의 함수가 필요하지 않다.
정리하면,
useState는 실시간으로 사용되는 중요한 상태관리가 필요할 때 사용하고,
useRef는 컴포넌트 내부에 저장하되 리렌더링이 필요하지 않은 값을 유지하고자 할 때, 혹은 DOM 요소에 직접적인 접근이 필요한 경우에 사용한다. 개발자는 이 두가지의 차이점을 적절히 인지하고, 개발에 활용하면 효율성에서 최적화된 react 웹 애플리케이션을 제작할 수 있을 것이다.
