1) ref 객체를 저장공간으로 사용할 때
- state 변경 시 리렌더가 되면, 함수형 컴포넌트는 '함수'이기 때문에, 재실행이 된다.
- state vs ref
state는 변경시 리랜더가 되면서 값이 업데이트 되지만,
ref는 컴포넌트가 unmount되기 전까지 값을 그대로 유지한다.
- variable vs ref
둘 다 값이 변한다고 해서 리랜더링이 발생하진 않는다.
하지만, 해당 컴포넌트의 state가 변경되면, 내부의 variable은 값이 초기화된다. (당연히 함수를 재호출한거니까..!)
하지만, ref는 값을 유지한다.
2) dom 요소에 접근할 때
- ex) 로그인 페이지 접근 시, input에 focus 되게 하고 싶을 때
- ref를 선언하고, 해당 input에 ref로 넣어준다.
- 그럼, input의 모든 것(?)에 접근할 수 있다.
- JS에서 queryselector를 이용했던 걸 떠올려보면 된다.
...
const inputRef = useRef();
useEffect (()=>{
inputRef.current.focus();
},[]);
return (
<div>
<input ref={inputRef} />
</div>
);
...
참고 유튜브
https://www.youtube.com/watch?v=VxqZrL4FLz8
https://www.youtube.com/watch?v=EMK8oUUwP5Q