상태관리로의 useState vs useRef

 

useState는 비동기다?!

import React, {useState } from 'react';

const MyFunc = () => {
	const [cnt, setCnt] = useState(0)

	const plusNum = () => {
		setCnt( cnt +1 );
            console.log(cnt);
	}

return (
	<div>
		<p> 값: {cnt} </p>
		<button onClick={plusNum}+</button>
	</div>
	)
}

 

위와 같은 코드가 있을때 plusNum 버튼을 클릭시

화면에는 바로바로 +1씩 적용이 되지만 콘솔에 찍혀있는 cnt값은 한박자씩 늦는 현상을 볼 수 있다.

그 이유는 비동기 특성을 갖는 이벤트 루프에 의해 setCnt 작업은 뒤로 밀리고, console.log 작업이 먼저 실행되기 때문이다.

 

비동기로 설계하는 이유는 여러개의 값이 변경될때마다 렌더링이 된다면, 너무 잦은 렌더링이 일어나기 때문에

변경된 값들을 한번에 모아 업데이트를 진행하고자 배치(Batch)기능을 사용해 비동기로 작동시킨 다고 한다.

배치업데이트는 16ms(0.016초) 주기이다. 

 

useRef의 특징

만약 위 코드에서
setCnt 바로 아래 함수가 console.log가 아니고 백엔드를 향하는 api이고, 그 input값에 cnt를 넣으면 정확하지 않은 데이터를 실어 보낼 것이다.

 

useState	useRef
컴포넌트의 생명주기에 따라 값이 다름	컴포넌트의 생명주기 내내 최신화된 값 유지
상태변화시 리렌더발생	리렌더발생X

 

useRef는 useState와 비교하여 위와 같은 특성을 갖고 있기에 프론트에서 비즈니스 로직을 구현할때, 

조금 더 적합하다고 볼 수 있다.