인프런 커뮤니티 질문&답변
작성한 질문수
setCounter로 값 변경 후 console.log로 카운터가 출력되는 이유
작성
·
300
2
분명 handleFormSubmit함수 밖에서 console.log("카운터", counter)를 찍었는데 setCounter를 통해서 counter 값을 변경하니 다시 console.log가 재실행되는 이유를 모르겠습니다. counter값이 변경되면 counter가 사용된 표현식도 재실행되는건가요?
답변 1
2
진유림
지식공유자
정말 좋은 질문이에요~!
상태가 바뀔때마다 카운터 console.log가 찍히는 이유는
리액트가 UI를 그리는 내부로직을 이해하면 알 수 있어요.
리액트는 UI의 요소가 바뀔때마다(e.g. 카운터를 올리거나, 고양이 사진을 바꾸거나) 해당 요소 UI만 바꿔치기한는게 아니라 변경이 일어난 요소를 포함한 컴포넌트 전체를 다시 그립니다. 이는 리렌더링 이라고 하죠.
그래서 Form컴포넌트 내부 상태인 counter가 바뀔때마다 Form코드가 다시 실행되는거예요.
이 설명은 '30강 useEffect의 정체'에서 나옵니다 ^.^
다시 그릴 필요가 없는 코드는 useMemo, useCallback등의 훅을 사용해서 성능 최적화를 할 수 있어요!
이는 중급 강좌에서 설명할건데 혹시 궁금하시면 먼저 찾아보셔도 좋습니다~
와 답변 감사합니다. 리렌더링을 통해 Form코드가 다시 재실행되는군요. 다만 이해가 안가는건 콘솔이 찍히기 전에 다시 counter가 정의되서 1이 될것같은데 그건 리액트 내부 로직에 의해서 막나보네요. 유추한게 맞을까요?