함수형 컴포넌트가 두 번 실행되는 이유(Strict Mode)

이것의 결론은 함수형 컴포넌트나 useState의 문제는 아니다. 단지 Strict Mode가 적용되어서 생긴 문제이다.

state를 동일한 값으로 update할때는 함수형 컴포넌트가 실행되지 않는다.(re-redering할 필요가 없음)

(예시)
count의 초기값(A)을 동일한 값(A)으로 바꾸려 하면 App함수가 호출되지 않는다.
(아래의 출력은 함수가 처음 실행될 때 이다.)

state를 다른 값으로 update할때는 함수형 컴포넌트가 두 번 실행된다.

(예시)
count의 초기값(A)을 (B)로 바꾸면 App함수가 호출되고, (B)를 다시 (B)로 바꾸어도 App함수가 호출되는 것을 알 수 있다. 그 뒤로는 (B)를 (B)로 바꾸어도 App함수가 더 이상 호출되지 않는다.
(아래의 첫 번째 출력은 함수가 처음 실행될 때 이다.)

React문서에 따르면, 이렇게 두 번 호출되는 것은 버그가 아니라 의도된 기능이며, Strict Mode에서 실행되는 이 기능은 사이트 이펙트를 발견할 수 있도록 도와준다.

Strick Mode: application내의 잠재적인 문제를 알아내기 위한 도구이다. 이 모드는 개발모드에서만 활성화 되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다. create-react-app으로 프로젝트를 생성하면 Strict Mode가 기본적으로 적용되어 있다. 이는 프로젝트의 시작 지점인 index.js에서 확인할 수 있다.