State 변화 → 렌더링 → 컴포넌트 내부 변수들 초기화,그래도 Ref의 값은 유지됨

Ref의 변화 → No 렌더링 → 변수들의 값이 유지됨, 화면이 업데이트 되지 않음

일반 변수 - > 화면이 렌더링 될때마다 값이 초기화, 유지되지 않음

[기본 코드]

const ref = useRef(0);
console.log(ref); //{current:0}

DOM 요소에 접근

ex) 로그인 화면 켜자마자 아이디 인풋 필드에 포커스되어 있게 하기

useEffect(()=>{
	inputRef.current.focus();
},[]);

<input ref={inputRef}></input>

장점

성능에 좋은 영향을 줌