사건의 발단
useEffect를 배우며 마운트과정을 콘솔에 찍어보다가, 첫 마운팅시에 콘솔로그가 두 번 찍힌다는걸 발견했다.
이 이후부터는 정상적으로 한번씩 찍혀 넘어가려고 했으나 찜찜한 마음에 검색을 해 보았는데,
원인이 index.js에서 루트에 컴포넌트를 렌더링 할 때 사용하는 <React.StrictMode>라는 것을 알게되었다.
원인은 StrictMode
리액트를 배운지 얼마 안되서 그동안 아무 생각없이 따라치던 녀석인데, 이녀석이 원인일 줄은 몰랐다.
StrictMode 는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로서, Fragment 와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다.
-> 쉽게 말해 StrictMode는 개발도중 발생하는 문제를 감지하기 위한 설정으로 Mount될 때 렌더링이 두번 발생되는 것도 일련의 문제감지 과정이라고 볼 수 있다.
해결방법
간단하다. StrickMode를 제거해주면 된다!
Mount시 렌더링이 한번만 되는 것을 확인할 수 있다.
StrictMode가 하는 또 다른 일
추가로 StrictMode는 아래와 같은 부분에서 도움이 된다고 한다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
느낀점
리액트를 처음배우며 create-react-app(웹팩)이 기본셋팅해주는 것을 이해하지 못한 채 영혼없이 따라치고 있었다. 기본 요소들과 원리들을 차근차근히 알아가며 리액트를 공부하는 맛이 있는 듯 하다. 앞으로 이런애들을 좀 파봐야겠다.
참고: 리액트 공식문서 - Strict모드
https://ko.reactjs.org/docs/strict-mode.html
'Front-End Developer > React' 카테고리의 다른 글
Router v6 헷갈려서 공부해봤다. 기초정리 (0) | 2022.06.14 |
---|---|
React를 한다면 무조건 알아야 할 - useRef 1편 (0) | 2022.06.13 |
영혼없이 썼던 import React from 'react' - 안써도 된다는데? (0) | 2022.06.13 |
리액트.... 이미지가 액박이 뜬다고? (0) | 2022.06.10 |
JS기초가 부족하면 React가 망한다는 말 진짜였네 (1) | 2022.06.08 |