버튼을 누를 때마다 매번 Form() 을 호출하는 걸까요?

Question

function Form() 이 html 처럼 고정적으로 표시되고 있는 거라고 생각했는데요.

매번 console.log(counter) 가 호출되는 걸 보니까, 이벤트가 발생할 때마다 Form()도 호출되서 화면에 새로 그려지고 있는 것 같은데 맞는 걸까요?

Answer

맞아요,

이벤트가 발생할때라기보다는,

컴포넌트 내부의 상태가 바뀔때마다 컴포넌트를 새로 그리기 때문에 매번 console.log가 찍히는 것입니다.

UI를 업데이트 하는 방법으로 리액트는 부분만 슬쩍 바꾸는게 아니고 해당 컴포넌트를 매번 re-rendering을 하는 방법을 택한거예요. 아래 블로그 글을 참고해보셔도 좋겠어요.

'33강 setState 더 알아보기' 에서 좀 더 다룹니다 :)

Answer

이걸 리렌더링이라고 하는군요.

리액트가 virtual DOM을 사용한다고 얼핏 들었는데, virtual DOM을 사용해서 상태가 변한 컴포넌트만 리렌더링해서 전체 렌더링에 비해 응답속도나 성능을 개선하는 건가봐요.

주신 링크 잘 읽어 보겠습니다. 감사합니다 :)