😯 useState()는 동기? 비동기?

💡 React의 useState()는 비동기인가요 동기인가요?

    - 네, 이 질문은 제가 면접에서 들은 질문입니다. React를사용하면서 당연하듯 찍어서 쓰던 useState()..

비동기인가요? 라는 질문에 많이 당황했습니다. 때문에 적어보는 useState()는 과연 동기일까? 비동기일까?

🙏 결론부터 말하자면

    - useState()의 setState는 이벤트 핸들러 내에서 비동기적으로 동작합니다.

즉, 하나의 이벤트 핸들러 내에서 setState가 여러번 호출된다면, 일괄적으로 업데이트하고 렌더링을 합니다.

이는 뚜렷한 성능 향상을 만들어냅니다.

🙄 그럼 왜 그럴까요?

    - React는 DOM을 직접 조작하는 대신 Virtual DOM을 이용해 조작됩니다. 이를 기반으로 state가 변경이 되면

re-render를 하게 되는데 한꺼번에 여러번 많이 발생하게 된다면 그 만큼 많은 렌더링이 발생합니다. 이를 방지하기 위해

state의 변경 사항을 즉시 반영하지 않고 대기열에 넣은후 한꺼번에 적용 시킵니다.

이과정에서 setState호출 후의 state 값이 개발자가 의도하지 않는 값이 될 수도 있습니다.

🤷‍♀️ 그럼 어떻게 하면 최신으로 유지하나요?

    - 방법은 업데이트 후의 state값을 접근하는 것이며

 componentDidUpdate(class component), useEffect(functional component) 등의 사용으로 해결 할 수있습니다.

참고