React hooks 에서 useState setter 함수 작동 순서

const [val, setVal] = useState(true);
const someFunc = ()=>{
  setVal(false);
  setVal(true);
}

return (
  {val ? null : <div> message! </div>}
)

위의 예제 코드에서 하고자 하는 일은,

어떤 이벤트 발생 시 div 태그를 한번 제게했다가 다시 보이게 하려는 것이다.

 

그래서 위처럼 set을 연달아 다른 값으로 해주면 div가 null 됐다가 다시 그려질줄 알았는데 그렇게 되지않았다..

(함수형 업데이트 방식으로 해도 동일했다)

 

원인 : setter 함수는 비동기적으로 실행되기 때문

즉, js 작업스택에 작업들이 모두 비워진 이후에

호출된 모든 훅들을 다 처리한 후 렌더링을 하기 때문에 위 상황에서 val 는 false가 되어도 그게 화면에 반영되진않고

반영되는건 마지막값인 true 이기 때문이다.

 

그래서 div 태그는 실제로 null 이 된적이없고 이전상태 그대로 화면에 보여지게 되는것이다.