[useRef]기본

이 글은 별코딩 영상을 참조하여 작성된 들입니다.

 

useRef

변화는 감지 해야하지만 그 변화가 랜더링을 발생시키면 안되는값을 다룰때
set000으로 데이터 값이 변경되면 (component가 있는)페이지가 re-loading되면서 변수값이 초기화 됨.

 

const countRef = useRef(0);

return (
<div>
  <p>Ref : {countRef.current}</p>
</div>

 

 

 

useRef의 2가지 특징

1 .저장공간
State의 변화 -> 랜더링 -> 컴포넌트 내부 변수들 초기화
Ref의 변화 -> No 랜더링 -> 변수들의 값이 유지됨

2. DOM 요소 접근

 

일반 변수와 다른 useRef값

왜냐, ref는 전생애 주기를 통해 값 유지

 

useEffect와 사용시에 좋은 조합
왜냐, ref는 re-rending을 발생시키지 않기때문.

 

무한 루프에 빠진 useEffect

왜냐하면 useEffect안 setRenderCount가 계속 re-rendering 시키니까

 

 

Input에 포커스 하기

 

참조

https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3