useRef 훅이란
useState와 마찬가지로 저장공간을 의미한다. 또한 내부를 살펴보면 {currunt : 값} 으로 object로 이루어져있다.
그렇다면 useState와 차이점이 무엇일까??
useState는 상태가 변화되었을 때 자동으로 컴포넌트가 다시 렌더링이 되는데 이때 컴포넌트의 내부 변수들을 다시 초기화가 된다.
하지만 useRef는 내부 값이 변경되어도 불필요한 렌더링은 생기지 않는다. 따라서 컴포넌트 내부 변수 값들이 유지된다.
사용
useRef는 변경 시 렌더링이 되지 말아야하는 값을 다룰 때 사용된다.
DOM 요소에 접근할 때 사용
예) input 요소를 클릭하지 않아도 focus를 주고 싶을 때
영상
- useState와 useRef의 차이
useState는 변화 시 렌더링이 발생하는데 useRef는 변화 시 렌더링이 발생하지 않음.
다만 값은 변화됨.
- useRef와 let의 차이
useRef와 let 변화 시 렌더링이 발생하지 않는데.
임의로 렌더링을 실행한 결과 useRef 값만 변화됨.
useRef는 컴포넌트 주기에서 렌더링에 관계없이 값이 일정하게 유지.
let은 렌더링이 되면 초기화
- DOM 요소 접근
useRef를 접근하고자 하는 요소에 ref 속성에 추가해주면 접근을 할 수 있다.
import { useRef, useEffect } from "react";
function App() {
const inputRef = useRef();
useEffect(() => {
inputRef.current.focus();
}, []);
const handleRef = () => {
alert(`${inputRef.current.value}님 반갑습니다.`);
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" placeholder="username" />
<button onClick={handleRef}>로그인</button>
</div>
);
}
export default App;
여기에서 input의 onChange 속성과 연관지어서 생각해볼 수 있는데
공부를 해본 결과
useRef 사용: DOM 요소에 직접 접근하여 값이나 상태를 변경할 때 사용되며, 값 변경에 따른 리렌더링이 발생하지 않는다. 따라서 불필요한 리렌더링을 방지할 수 있어 성능적으로 유리할 수 있다.
onChange 사용: 사용자가 입력할 때마다 값을 추적할 수 있으며, 상태가 변경될 때마다 리렌더링이 발생한다. 값의 즉각적인 추적이 필요한 경우 유용하지만, 모든 입력마다 리렌더링이 일어나기 때문에 성능에 영향을 줄 수 있다.
따라서 입력값을 실시간으로 추적할 필요가 없을 때는 useRef가 더 적합하며, 입력된 값을 즉시 반영해야 하는 경우에는 onChange를 사용하는게 더 낫다.
위의 공부한 내용을 보면
한 예시로 생각해낸 것이
서버에서 데이터를 받아와
검색어 입력 기능을 통해 실시간으로 렌더링이 필요한 경우 (onChange 사용)
버튼을 이용하여 검색어를 통한 필터링으로 실시간 렌더링이 필요없는 경우 (useRef 사용)
