React - setTimeout function 에서 state 접근

Function 컴포넌트에서 useState 를 사용하고있고,

setTimeout  함수안에서 특정 state 값을 체크해야 하는 상황인데,

이상하게도 분명히 setTimeout 함수가 실행되기 전  state 를 변경해주었는데도 setTimeout 호출 함수는 setTimeout 세팅 시점의 값을 가져오고 있었다.

const [status, setStatus] = React.useState('ready');

function onClick() {
	setTimeout(() => {
		console.log('after timeout: ', status);
	}, 1000);
    
	setStatus('started');
}

console.log('rendering :', status);


return <button onClick={onClick}>Click</button>;

나의 경우에는 timeout 이후에 버튼 컴포넌트에 접근해서 클릭하는 방식으로 바꿔서 정확한 state 값을 접근하도록 했지만, 그렇지 않은 경우에는 어떻게 해야할까?

 

나와같은 이슈를 가진 사람이 이미 그 해답을 찾아놓았는데, 바로 state 값을 ref 로 지정해서 접근하는 방법이다.

자세한 사항은 아래 글의 가장 마지막 예시를 참고하면 된다.

setTimeout in React Components Using Hooks - Upmostly