인프런 커뮤니티 질문&답변
작성한 질문수
state 상태 변화 함수 비동기 질문
해결된 질문
작성
·
72
1
7.2) useEffect 사용하기 강의에서 state의 상태 변화 함수는 비동기로 동작하기 때문에 콘솔에 count 값을 출력하면 이전 값이 나온다고 설명하셨습니다.
그런데
state의 값이 변경되면 리렌더링 되면서 화면에 count 값이 보여지는 건 setCount인 상태 변화 함수가 실행되고, 완료됐기 때문에 화면에 나타난다고 생각했습니다.
그렇기 때문에 콘솔에 이전의 값이 출력 된다는 점이 이해가 가지 않아 질문 드립니다.
버튼을 누르면 onClickButton 함수가 실행된다.
setCount 상태 변화 함수가 실행되어 값을 더한다.
setCount 함수가 완료되지 않아 콘솔 창엔 이전의 count 값이 출력된다.
setCount 함수가 완료되고 state의 값이 변경됐기 때문에 리렌더링이 된다.
리렌더링 된 값이 화면에 출력된다.
이런 순서로 진행되는 건가요? 코드가 어떻게 동작 되는 건지 이해가 안돼서 질문 남깁니다 ㅜㅜ...
항상 친절하고 자세하게 강의해주셔서 감사합니다!
답변 2
0
안녕하세요 이정환입니다.
넵 말씀해주신 순서대로 동작합니다. 자바스크립트의 비동기 함수는 동기적으로 동작하는 코드가 모두 종료되고 난 뒤에 실행되기 때문입니다. 따라서 console을 먼저 출력한 이후에 상태의 업데이트가 이루어지고 그 뒤에 컴포넌트가 리렌더링됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. 강두희님의 질문에 대해 도움이 될 만한 정보를 찾았습니다. 질문하신 내용은 React의 useState와 setState 비동기적 특성에 대한 궁금증과, 그로 인해 발생하는 리렌더링 과정에 대한 이해를 요구하는 것으로 보입니다. 비슷한 주제로 질문하신 다른 분들의 질문 및 지식공유자님의 답변을 참고하시면 도움이 될 것 같습니다.
- [input 속성 및 state 관리] 사용자 입력 처리하기 에 대한 질문에서 이정환님은
useState의setState가 비동기적으로 동작하는 이유에 대해 설명하고 있습니다. 이 답변은setCount함수가 실행되어 값이 갱신될 때, 리액트가 내부적으로 컴포넌트를 다시 호출하여 변경된State값이 적용된 UI를 렌더링 하도록 하기 위한 설계라고 설명합니다. 이 과정은 강두희님의 질문 중setCount함수가 완료되지 않아 콘솔 창에 이전의count값이 출력된다고 이해하는 부분에 대한 좀 더 명확한 해석을 제공할 수 있습니다.
답변 링크는 다음과 같습니다:
- [input 속성 및 state 관리] 사용자 입력 처리하기 (질문 보러가기)
이 답변에서는, useState의 setState 함수 호출 시 상태 업데이트가 비동기적으로 처리되며, 이 과정에서 React가 컴포넌트를 다시 호출하여 변경된 상태값을 적용하여 UI를 렌더링하도록 설계되어 있다고 설명하고 있습니다. 다시 말해, setState 함수를 호출하여 상태 값을 업데이트 한 뒤 바로 콘솔에 값을 출력하면, 아직 React에 의해 상태 업데이트가 반영되기 전의 값이 출력되는 것이 정상입니다. 반면, 상태 업데이트를 통해 리렌더링이 진행되고 난 후에는 최신 상태의 값이 UI에 반영됩니다. 이 과정이 궁금하신 것 같아 해당 정보를 공유드립니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변주셔서 감사합니다!