[React] useEffect, useRef

useEffect

페이지가 렌더링 될 때마다 불리는 함수

useRef와 일반 변수의 차이

const countRef = useRef(0) 
let countVar = 0;

countRef+1 할 경우 페이지가 unmount 되기 전까지 증가된 값이 남아있다.

countVar+1 할 경우 페이지가 재 렌더링 될 경우 값이 초기화된다.

useRef 잘못된 사용법

const App = () => {
    const [renderCnt, setRenderCnt] = useState(0);
 
    useEffect(() => {
        setRenderCnt(renderCnt+1);
    });
}

이렇게 사용할 경우 페이지가 렌더링 되면 renderCnt를 1 증가시키고 페이지가 다시 렌더링된다. 그러면 페이지가 렌더링 됐으니 다시 useEffect 함수를 타고 다시 renderCnt를 1 증가시킨다. 이렇게 계속 무한 루프에 빠지게 된다.

useRef 올바른 사용법

const App = () => {
    const renderCnt = useRef(0);
 
    useEffect(() => {
        renderCnt.current = renderCnt.current+1;
    });
}
 

ref 는 리렌더링을 발생시키지 않는다. 렌더링이 처음 될 경우 rederCnt의 값은 변화시키지만 리렌더링을 발생시키지 않으므로 값만 변화하고 렌더링 무한루프에 빠지지 않는다.