1useRef란
- 변수임.
- 크게 두 가지로 쓰임.
2. DOM 요소에 직접 접근
const myInputRef = useRef();
function focusOnInput() {
myInputRef.current.focus();
}
return (
<>
<input ref={myInputRef} type="text" />
<button onClick={focusOnInput}>포커스 주기</button>
</>
);- intput이라는 놈은 참조해서, 지금 위치인 함수형 컴포넌트에서 얘에 대한 조작을 할 수 있음.
3. 렌더링과 무관한 변수 용도
const renderCount = useRef(0);- 그냥 변수 만드는 용으로 사용됨
그럼 그냥 let으로 만들지 뭐하러 useRef 쓰나?
- Lifecycle을 이해하고 있어야 함.
- 기본적으로 react 컴포넌트들은 아마 리렌더링 되는 경우가 많음
- let으로 만들면 리렌더링 될 때마다 초기화됨
- 반면 useRef로 만들면 컴포넌트가 처음 마운트될 때 한 번만 생성됨
- 그리고 리렌더링에 영향을 받지 않음. 즉 초기화 되지 않음
- 심지어 useState랑 다르게 이걸로 리렌더링 되지 않음.
- 그러니까 컴포넌트 리렌더링될 때 값이 초기화되지 않고 계속 유지되는 변수로 만들기 위함임.
handsome