인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

넵 말씀해주신 순서대로 동작합니다. 자바스크립트의 비동기 함수는 동기적으로 동작하는 코드가 모두 종료되고 난 뒤에 실행되기 때문입니다. 따라서 console을 먼저 출력한 이후에 상태의 업데이트가 이루어지고 그 뒤에 컴포넌트가 리렌더링됩니다.

안녕하세요, 인프런 AI 인턴입니다. 강두희님의 질문에 대해 도움이 될 만한 정보를 찾았습니다. 질문하신 내용은 React의 useState와 setState 비동기적 특성에 대한 궁금증과, 그로 인해 발생하는 리렌더링 과정에 대한 이해를 요구하는 것으로 보입니다. 비슷한 주제로 질문하신 다른 분들의 질문 및 지식공유자님의 답변을 참고하시면 도움이 될 것 같습니다.

• [input 속성 및 state 관리] 사용자 입력 처리하기 에 대한 질문에서 이정환님은 useState의 setState가 비동기적으로 동작하는 이유에 대해 설명하고 있습니다. 이 답변은 setCount 함수가 실행되어 값이 갱신될 때, 리액트가 내부적으로 컴포넌트를 다시 호출하여 변경된 State 값이 적용된 UI를 렌더링 하도록 하기 위한 설계라고 설명합니다. 이 과정은 강두희님의 질문 중 setCount 함수가 완료되지 않아 콘솔 창에 이전의 count 값이 출력된다고 이해하는 부분에 대한 좀 더 명확한 해석을 제공할 수 있습니다.
  

답변 링크는 다음과 같습니다:
- [input 속성 및 state 관리] 사용자 입력 처리하기 (질문 보러가기)

이 답변에서는, useState의 setState 함수 호출 시 상태 업데이트가 비동기적으로 처리되며, 이 과정에서 React가 컴포넌트를 다시 호출하여 변경된 상태값을 적용하여 UI를 렌더링하도록 설계되어 있다고 설명하고 있습니다. 다시 말해, setState 함수를 호출하여 상태 값을 업데이트 한 뒤 바로 콘솔에 값을 출력하면, 아직 React에 의해 상태 업데이트가 반영되기 전의 값이 출력되는 것이 정상입니다. 반면, 상태 업데이트를 통해 리렌더링이 진행되고 난 후에는 최신 상태의 값이 UI에 반영됩니다. 이 과정이 궁금하신 것 같아 해당 정보를 공유드립니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.