React Hooks의 setState는 비동기적으로 동작합니다. 왜!?

혹시 제목에 있는 내용을 알고 계셨나요? React 컴포넌트에서 const [something, setSomething] = useState(0); 를 두고 특정 함수에서 setSomething(something + 1234)를 실행하고 즉시 console.log(something)을 실행했다고 생각해봅시다. setSomething이 동기적으로 동작했다면 콘솔창에는 1이 출력되어야합니다. 하지만 그런가요? React 개발을 좀 하셨다면 위 문단의 상황을 이미 경험하셨을 겁니다. 이미 비동기적으로 동작한다는 것을 경험상 알고 계셨던거죠! 비동기적으로 동작한다고 하니 말만 좀 있어보이는(?) 그런 상황입니다 ㅋㅋㅋㅋ 그러면 React 팀에서는 왜 setState를 비동기적으로 동작하도록 만들었을까요? 아래 react 레포의 이슈에서 해당 내용을 다루고 있습니다. 하지만 영어라 좀 거북하네요.. 해당 이슈에 대한 번역 및 좋은 분석이 있어 링크를 달아두었습니다. https://github.com/facebook/react/issues/11527 이슈에서는 setState가 비동기적으로 동작하는 이유에 대해 궁금해합니다. 비동기렌더링을 진행해도 상태는 동기적으로 업데이트하면 안되는지와 컴포넌트 렌더링과 상태의 업데이트의 상관관계에 대한 의문을 표하고 있습니다. 이에 대한 답변으로 Guaranteeing Internal Consistency과 Enabling Concurrent Updates의 관점에서 비동기적으로 동작하는 것이 더 좋은 방향이라는 것을 설명해주고 있습니다. 간단하게 설명드리면 state는 동기적으로 업데이트되어도 props는 업데이트가 불가능하고 이에 따라 state, props, refs 사이 일관성이 깨져 이에 따라 다른 문제가 발생한다는 것과 비동기적으로 동작한다면 내부적으로 일어나는 동작의 우선순위 조정이 가능하다는 설명을 하고 있습니다. 되게 흥미로운 문의와 답변의 흐름이니 이 이상은 이슈와 링크를 참고해주세요!