[React] console.log가 두 번 찍히는 현상(strict mode)

JNETiii·2021년 6월 18일
0

Frontend

목록 보기
1/3
post-thumbnail

목표

MongoDB에 저장되어있는 값을 가져와서 그 값으로 setState해 준 후 state 값을 하위 컴포넌트에 props로 넘겨주어 렌더링 해주는 것!

나는 먼저, MongoDB의 데이터를 가져와서 setState를 한 후, console.log로 찍어보는 테스트를 했다.

⚠결과

맨 처음에는 undefined가 찍히고 그 다음에 DB에서 가져온 값이 찍혔다.

그리고는 하위 컴포넌트에서 undefined 에러가 났다. (넘겨준 props 값이 undefined여서 하위에서도 undefined 에러가 난다.)

오류가 한번에 두 개가 나니까 이때부터 멘탈이 나가기 시작했다 ...

이유

다시 정신을 차리고 구글링을 해보니 console.log가 두 번 찍히는 현상은

useState를 사용하는 컴포넌트에서 발생하는 의도된 기능이라고 한다.

react를 시작하기 위해 'create-react-app'을 하게되면 자동으로 StrictMode가 설정된다.

❓StrictMode란❓

애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로, 개발 모드에서만 활성화 된다고 한다. (실제 배포를 하면 영향을 끼치지 않는다.)

일단 오류가 아니라고 하니 마음이 놓인다.

...

하지만

아직도 undefined는 계속된다 ...
다음 포스트에서 undefined 해결방법을 포스팅 하겠다.

profile
도전자 | 개발자

0개의 댓글