console.log(counter); 가 handleFormSubmit 함수 내부에 있을 때 동작이 잘 이해가 안됩니다.

Question

안녕하세요! Form 컴포넌트 내부를 작성해보다 실수로 아래와 같이 작성하였는데요 function handleFormSubmit(event) {    event.preventDefault();    console.log('submit');    setCounter(100);    console.log(counter); } 이런식으로 작성을 했더니 처음 submit 시에는 console 에 1이 찍히고 그 다음에 100이 찍혔습니다. 이 동작이 잘 이해가 되지 않는데 이유를 알 수 있을까요?!

jayjinjay · Answer

좋은 의문입니다~ 이유는 리액트가 이벤트 핸들러 내에서 setState가 동기적(한 줄 코드가 끝나면 다음 줄 코드 읽기)이 아닌 비동기적(한 줄 코드가 완전히 끝나지 않더라도 다음 줄 코드 읽기)으로 작동하기 때문이에요. 그래서 setCounter(100)을 하고 바로 console.log로 counter를 찍으면 아직 100으로 바뀌지 않은 상태기 때문에 1이 찍힙니다. 브라우저 이벤트가 모두 끝나면 리액트가 state를 업데이트하고, 이렇게 하면 불필요하게 앱이 리렌더링되지 않고 한번에 최적화되어서 화면을 새로 그리게 됩니다.   33강에서 더 설명합니다 ㅎㅎ   https://ko.reactjs.org/docs/faq-state.html 이 문서 읽기도 추천드려요.

goddios · Answer

와! 유림 선생님 감사합니다! github 책부터 여러모로 도움 많이 받고 있습니다. 더 열심히 공부해볼게요!