Ref
https://react.dev/learn/referencing-values-with-refs
https://react.dev/reference/react/useRef
Referencing Values with Refs
When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.
한 컴포넌트에게 어떤 정보를
기억하도록하고 싶을 때, 하지만 해당 정보가(의 변화에 의해)리렌더링을 발생시키지 않기를 원할 때, ref를 사용할 수 있다.
-> 즉, 리렌더의 트리거가 되는 state를 사용하는 대신, ref를 사용해 리렌더링 없이 한 컴포넌트가 가진 정보의 변화를 추적할 수 있는 것.
// 사용할 함수의 최상위부에 이렇게 선언
const ref = useRef(0);
// useRef의 반환값은 대충 이런모습
{
current: 0 // The value you passed to useRef
}ref.current 프로퍼티
You can access the current value of that ref through the ref.current property. This value is intentionally mutable, meaning you can both read and write to it. It’s like a secret pocket of your component that React doesn’t track. (This is what makes it an “escape hatch” from React’s one-way data flow—more on that below!)
밑줄 된 내용: 리액트가 추적하지 않는, 컴포넌트의 비밀주머니와 같은 것.
-> state는 리액트 엔진에 등록되고 리렌더되는(사실상 const [state,setState] 등의 "스코프 내부 변수"가 초기화 되는 것 ) 시점에 해당 state의 변화가 주입된다.
이러한 react의 state 추적 및 리렌더링을 유발하지 않으면서 컴포넌트의 정보를 현재의 렌더링 context 내에서만 추적하고 싶다면 ref를 사용하면 되는 것이라고 이해했다.
