useRef

그저 input의 .focus()기능을 사용하기위해 쓰던 useRef에 대해 깊게 공부해보자

useRef란?

• 인자로 넘어온 초기값을 .current 프로퍼티에 저장한다
• 따라서 .current안의 값이 바뀌어도 useRef자체가 바뀌는게 아니라서 재랜더링이 일어나지 않는다.

  useRef안에 .current라는 박스가 있고 해당 박스내부에서 값이 바뀌기 때문에 렌더링에 영향을 끼치지 않는다고 생각하면 될듯

사용용도

• DOM요소를 직접 가르켜서 상태값을 변경할때
• 값이 변경되어도 렌더링에 지장이 없는 값을 쓰고싶을때

간단한 예제

• 아래 코드에서 increment버튼을 클릭시 useEffect가 발생하여 렌더링
• ref increment버튼을 클릭시 useEffect 발생하지 않는다, 하지만 .current값은 바뀌고있음
• show Ref버튼을 클릭시 ref increment를 눌린 횟수만큼 ref의 값이 증가해있음

return (
    <>
      {count}
      <button onClick={() => { setCount((count) => count + 1)}}> increment</button>
      <button onClick={() => { refCount.current++; }}>ref increment</button>
      <button onClick={() => { console.log("current ref is...", refCount)}}>show Ref</button>
    </>
  );