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객체의 사용이 빛을 발하는 경우(변화는 발생해야 하지만 그 변화로 리랜더링이 발생하지 않아도 되는 경우)가 아래의 해결책이다.
요약: ref객체를 사용하기 좋은 경우: 변화는 발생해야 하지만 그 변화로 리랜더링이 발생하지 않아도 되는 경우
'FrontEnd > React' 카테고리의 다른 글
React Hooks -useEffect와 useRef를 이용한 간단한 프로그램만들기 (0) | 2024.03.27 |
---|---|
React Hooks -useEffect에 대하여 (0) | 2024.03.27 |
React Hooks -useRef에 대하여(2) (*****내가 생각했던 모든 깊은 내용이 모두 공식문서에 있다. 반드시 공식문서를 익숙히 해야 한다. 공식문서가 가장 자세하고 친절한 설명서다*****) (0) | 2024.03.27 |
React Hooks -useRef에 대하여 (2) | 2024.03.26 |
React Hooks -useState에 대하여 (0) | 2024.03.26 |