[React js] state, useRef(), 로컬변수

리액트에서는 변수를 사용할때 

useState를 이용해 상태 관리와 리랜더링을 할 수 있다. 

하지만 해당 변수의 값변경이 리랜더링이 필요없을 때는 useState를 이용하는건 불필요하다.

특정 이벤트가 동작했을 때 useEffect()를 타도록 개발을 하고 있었다. 

그렇기 때문에 의존성 배열에 useState를 통한 변수를 넣을지 , useRef()를 통한 변수를 넣을지 고민하다가

문득 로컬변수와 useRef()의 차이점에 대해 정리가 명확하게 되지 않았다. 

우선 useRef()는 useState처럼 값이 변경됐을때 리랜더링을 발생시키지 않지만, 동일하게 값을 유지하고 관리할 수 있는 

리액트 훅이다.

그렇다면 로컬 변수 또한 값이 변경됐을 때 리랜더링을 발생시키지 않는데, 그럼 어떤 상황에서 뭘 써야할까? 

차이점은 '동일하게 값을 유지하고 관리' 라는 점에서 발생된다. 

useRef는 컴포넌트가 렌더링이 되더라도 값을 유지한다. 이유는 리액트의 렌더링 메커니즘 때문인데, 

여기서 설명하기엔 주제를 벗어남으로 해당 주제에 관해선 더 자세하게 공부해서 적어야겠다.

아무튼 로컬 변수는 함수 스코프 안에 선언된 변수이기 때문에 컴포넌트가 다시 리랜더링이 되면 

다시 선언되어 초기화가 된다. 

즉, 리렌더링이 되어도 값을 유지하고 지속적으로 관리해야하는 것이라면 useRef()를 쓰고, 단순히 함수 내부에서

로직상 임시로 저장해서 처리하는 것이라면 로컬변수를 사용하는 것이 좋겠다. 

 

ex) let var1 = 0; 
var1 += 10; 
if(var1 >20) {setState(var1)} //이런식으로 state가 바뀌어 리랜더가 된다면 var1의 값은 다시 0으로 초기화된다.
반면에 
let var1 = useRef(0);
var1.current += 10;
if(var1 >20) {setState(var1)} // 리랜더가 되어도 var1의 값은 유지된다.