React Hooks -useRef에 대하여(3) ref객체와 일반변수와의 다른점. ref를 사용하기 좋은 경우

ref와 variable의 차이점을 보여주는 예. render시 ref의 current값은 초기화되지 않지만 render시 함수형 컴포넌트 전체가 다시 실행되는 것이므로 변수(variable)는 초기값으로 초기화되는 것을 아래 예의 결과에서 확인할 수 있다. 

import React,{useRef, useState} from "react";

const App=()=>{

  const[render, setRender]=useState(0);

  const ref=useRef(0);

  let variable=0;

const doRender=()=>{

  setRender(render+1);

}

const upRef=()=>{

  ref.current=ref.current+1;

  console.log(ref.current);

}

const upVar=()=>{

  variable+=1;

  console.log(variable);

}

const printRefVar=()=>{

  console.log(ref.current, variable);

}

  return(<>

  <div>Ref:{ref.current}</div>

  <div>Var:{variable}</div>

  <button onClick={doRender}>Render!</button>

  <button onClick={upRef}>Ref올려!</button>

  <button onClick={upVar}>Var올려!</button>

  <button onClick={printRefVar}>Ref Var값 출력</button>

  </>)

}

export default App;

 

(잠깐 복습.

보통 클래스 컴포넌트에서 render함수 안에는 setSTate를 사용하지 말아야 하며 그 이유는 무한 랜더링에 빠지기 때문이라고 알고 있다. 아래의 예시는 훅에서 그 경우를 보인것이다. useEffect는 매번 랜더링이 발생할때마다 실행이 되는 것이고 그 안에 setState가 오므로 다시 함수형 컴포넌트 전체가 랜더링되고 이는 또다시 useEffect를 실행하게끔 한다. 즉 무한 반복되는 것이다.

위의 문제상황이 개선되면서 ref객체의 사용이 빛을 발하는 경우(변화는 발생해야 하지만 그 변화로 리랜더링이 발생하지 않아도 되는 경우)가 아래의 해결책이다.

여기서 주의할 점이 button의 onClick 속성의 값에 오는 함수가 반드시 화살표 함수가 와야 한다는 것이다. 그렇지 않고 그냥 함수를 쓰면 버튼을 누르지 않고도 함수가 실행되어 tooManyRe-renders오류가 발생한다.

 

요약:  ref객체를 사용하기 좋은 경우: 변화는 발생해야 하지만 그 변화로 리랜더링이 발생하지 않아도 되는 경우