🫨 궁금증 발생

컴포넌트 내에서 함수를 호출할 때마다 += 1을 시킬 변수를 사용할 일이 있었는데,
인강에서 var, let, const 같은 변수선언자를 사용하여 변수를 선언하는 것이 아닌,
useRef(0)를 사용하여 변수를 선언하고 사용하는 것이다.

왜?지?

찾아보았다.

🎯 변수선언자를 사용한 변수를 사용할 시

리액트는 기본적으로, state 값이 변할 때마다 자동 리렌더링된다.
리렌더링이 될 때마다, 값들이 초기화 및 재선언된다.

let n = 0;

const plus = () => {
  return n += 1
}

plus()

함수 plus 를 100번 호출하여도, 리렌더링이 되면, n은 다시 0이 된단 말씀...
심지어 저 함수 호출이 state 값을 변경시키는 코드가 들어가 있다면,
n은 영원히 0에서 시작이 되고, 영원히 1이 되는 셈이다.
결국 점진적인 변화가 일어나지 못한다.

🪄 그럼 useRef()는 ?

저 변수선언자 사용은 초기화되서 값이 안바뀐다는 것은 쉽게 이해했는데,
그럼 대체 useRef는 무슨 원리이길래 값이 바뀌지 않고 사용이 된다는 건지 궁금했다.

이것저것 찾아보았다. 👇🏻

📝

useRef() 훅은 컴포넌트에서 가변 값에 대한 참조를 하기 원할 때 사용한다.
useRef()를 사용하여 생성된 참조 객체는, 컴포넌트의 렌더링 사이클 동안에도 유지되고,
state로 렌더링이 발생할 때 마다 초기화 되지 않는다(😱)
이게 바로 useRef() 훅의 주요 동작 원리이다.

그리하여, useRef()는 변수의 값을 저장하고 있다가
useState를 통해 페이지가 ReRendering될 때 변경된 값을 확인 할 수 있는 것이다.

그래서!!
리렌더링이 발생해도 useRef 값이 초기화 되지 않았던 것이고,
값이 유지되어 계속 쓸 수 있었던 것이다.

state의 리렌더링에 영향을 받지 않으니, 컴포넌트 내에서 유지돼야할 변수를 사용하고 싶을 때, useRef() 훅을 사용한 것이다 !!

내부의 진짜 동작원리가 어떻게 굴러가는지는 ... 중니어가 되어가는 과정에서 더 공부해봐야겠다.