useRef

y___h·2023년 5월 15일
0

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>
);


// inputRef.current.value

...

참고 유튜브
https://www.youtube.com/watch?v=VxqZrL4FLz8
https://www.youtube.com/watch?v=EMK8oUUwP5Q

profile
기록 이사중 🐣

0개의 댓글