setCounter로 값 변경 후 console.log로 카운터가 출력되는 이유
318
작성한 질문수 9
분명 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등의 훅을 사용해서 성능 최적화를 할 수 있어요!
이는 중급 강좌에서 설명할건데 혹시 궁금하시면 먼저 찾아보셔도 좋습니다~
0
와 답변 감사합니다. 리렌더링을 통해 Form코드가 다시 재실행되는군요. 다만 이해가 안가는건 콘솔이 찍히기 전에 다시 counter가 정의되서 1이 될것같은데 그건 리액트 내부 로직에 의해서 막나보네요. 유추한게 맞을까요?
0
이것도 넘 좋은 유추예요~ ㅎㅎ 좋은 의문을 가지고 계시네요
네 리액트 내부 로직으로 기존 state값을 들고 있기 때문입니다. 그래서 useState코드가 다시 불려도 state값은 유지되어요.
이는 자바스크립트의 클로저로 구현되어있는데요,
더 궁금하시다면 'react usestate 직접구현' 등으로 구글링해보시면
간단한 클로저 코드로 useState를 구현해놓은 글들을 보실 수 있을거예요~
API 적용 안되는 코드 수정 방법입니다.
0
85
1
고양이 이미지가 엑박이 뜨네요
0
65
1
npx 명령어 사용 불가
1
86
1
const 변수와 컴포넌트의 차이
0
94
1
강의노트
0
146
1
vite로 리액트 빌드한 후 깃허브에 배포하는 방법
0
340
1
빌드할때 dist 폴더가 만들어지는데요,
0
798
1
js파일 업로드 요청
0
139
1
변경된 api 사용시 text 안나오는 문제
0
151
1
메인글자수정...
1
283
3
디렉터리 구조 관련하여 참고할 만한 예시가 있을까요?
1
315
1
https://cataas.com/undefined 로 나오는데 왜그런건가요?
1
609
4
고양이 사진이 깨져요.ㅜㅜ
2
363
3
강의 노트 위치를 모르겠습니다
1
347
1
깃 강의노트 어디서 볼 수 있나요?
1
382
2
이해가 안되는 부분이 있어요
1
366
1
api가 안불러와지네요...
1
671
4
진유림 선생님 너무 궁금해서 질문드립니다 ㅜ
1
338
2
react에서 컴포넌트 만들 때 대문자를 쓰는 이유
2
1162
2
https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ
1
336
2
index.js 내용이 바꼈네용
1
321
2
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
1
263
2
html 코드 오류
1
465
2
고양이 이미지 깨져요
1
343
2